0

Necesito ayuda con este dropddown ya que me funciona normal con las propiedades responsive definidas para los pcs con px superiores a 1400. Pero con los menores, el dropdown en lugar de desplegar la lista hacia abajo lo hace hacia la derecha. Aquí les dejo el código:

<li class="nav-item dropdown text-center">
  <div class="btn-group flex-column">
    <div class="d-flex">
      <a type="button" class="btn text-light btn-sm my-auto" 
      href="#categorias">Categorías</a>
      <button type="button" class="btn text-light dropdown-toggle dropdown-toggle-split" 
      data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu flex-column" id="categoriasDropdown">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</li>

Por favor, necesito ayuda. Se los agradecería mucho.

--- EDITADO ---

Ahora quedó así:

<li class="nav-item dropdown text-center">
  <div class="btn-group">
    <div class="d-flex">
      <a type="button" class="btn text-light btn-sm" 
      href="#categorias">Categorías</a>
      <div class="flex-column">
        <button type="button" class="btn text-light dropdown-toggle 
        dropdown-toggle-split" data-bs-toggle="dropdown" aria- 
        expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu flex-column">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a> 
          </li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </div>
</li>
11
  • Hola, primero que nada te recomiendo hacer el recorrido de bienvenida Commented el 25 ene. a las 21:44
  • el codigo que has compartido es el sugerido por bootstrap ... que has intentado tu para resolver el problema??? Commented el 25 ene. a las 21:46
  • Sí, es de bootstrap 5. Y he intentado separar el botón que me despliega la lista y la lista, y cuando se despliega el ancla categorías se baja junto a la lista. Commented el 25 ene. a las 21:47
  • Nada, la sigue desplegando a la derecha Commented el 25 ene. a las 21:53
  • 1
    Como es HTML + CSS + JS, podés agregar un ejemplo mínimo verificable ejecutable en la pregunta a través de un snippet (con el botón que indica <>). De hacerlo, no olvides agregar el CSS y el JS de Bootstrap, haciendo clic en Agregar librería externa, situado a la izquierda de la pantalla.
    – padaleiana
    Commented el 26 ene. a las 1:01

1 respuesta 1

-1

intenta forzar el despliegue con la clase dropdown-menu-end de la siguiente manera:

      <ul class="dropdown-menu flex-column dropdown-menu-end" id="categoriasDropdown">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.