Bootstrap: posición del menú desplegable en relación con el elemento de la barra de navegación

108

Tengo el siguiente menú desplegable

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

La esquina superior izquierda del menú desplegable está en la esquina inferior izquierda del texto (Acción), pero espero que la posición de la esquina superior derecha del menú desplegable esté en la parte inferior derecha del texto. ¿Cómo puedo hacer eso?

curioso1
fuente

Respuestas:

229

Este es el efecto que estamos tratando de lograr:

Un menú alineado a la derecha

Las clases que deben aplicarse cambiaron con el lanzamiento de Bootstrap 3.1.0 y nuevamente con el lanzamiento de Bootstrap 4. Si una de las siguientes soluciones no parece estar funcionando, verifique el número de versión de Bootstrap que está importando. y prueba uno diferente.

Bootstrap 3

Antes de v3.1.0

Puede usar la pull-rightclase para alinear el lado derecho del menú con el símbolo de intercalación:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

Violín: http://jsfiddle.net/joeczucha/ewzafdju/

Después de v3.1.0

A partir de la v3.1.0, hemos desaprobado la extensión .pull-right en menús desplegables. Para alinear un menú a la derecha, use .dropdown-menu-right. Los componentes de navegación alineados a la derecha en la barra de navegación utilizan una versión mixta de esta clase para alinear automáticamente el menú. Para anularlo, use .dropdown-menu-left.

Puede usar la dropdown-rightclase para alinear el lado derecho del menú con el símbolo de intercalación:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

Violín: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

La clase para Bootstrap 4 es la misma que Bootstrap> 3.1.0, solo tenga cuidado porque el resto del marcado circundante ha cambiado un poco:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Violín: https://jsfiddle.net/joeczucha/f8h2tLoc/

Joe Czucha
fuente
1
Probé pull-right y pull-left en el sitio web de RTL. Funcionan perfectamente, pero el menú desplegable a la derecha y el menú desplegable a la izquierda no.
curioso1
El contenedor (.dropdown) debe tener una pantalla de "inline-bock". En este ejemplo, el LI está bien, pero si fuera un DIV, la alineación se colocaría al final del elemento de bloque que está influenciado por el ancho del submenú.
Nicholas
La clase "dropdown-menu-right" también funcionó con Bootstrap 4 (beta). ¡Gracias! "pull-right" no funcionó.
Andreas Vogl
usar class="dropdown"fue la clave para mí para obtener una alineación adecuada
Louis
50

No estoy seguro de cómo otras personas resuelven este problema o si Bootstrap tiene alguna configuración para esto.

Encontré este hilo que proporciona una solución:

https://github.com/twbs/bootstrap/issues/1411

Una de las publicaciones sugiere el uso de

<ul class="dropdown-menu" style="right: 0; left: auto;">

Probé y funciona.

Espero saber si Bootstrap proporciona una configuración para hacer esto, no a través del css anterior.

Salud.

curioso1
fuente
1
gracias, este funcionó para el menú desplegable de bootstrap 4 en una barra de navegación
Petru Lebada
20

Basado en Bootstrap doc:

A partir de la v3.1.0, .pull-right está obsoleto en los menús desplegables. usar .dropdown-menu-right

p.ej:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
Ninetiger
fuente
1
Probé pull-right y pull-left en el sitio web de RTL. Funcionan perfectamente, pero el menú desplegable a la derecha y el menú desplegable a la izquierda no.
curioso1
10

Si desea mostrar el menú hacia arriba, simplemente agregue la clase "desplegable"
y elimine la clase "desplegable" si existe en el mismo div.

<div class="btn-group dropup">

ingrese la descripción de la imagen aquí

Philip Enc
fuente
1
"Espero que la posición de la esquina superior derecha del dropdwon esté en el lugar inferior derecho del texto" - OP
Joe Czucha
No puedo entender tu comentario, lo siento !!
Philip Enc
Se ve bien pero, ¿cómo podemos hacerlo automático? Como si tuviera una lista de datos y la parte inferior no está segura.
Santosh
2

Incluso si es tarde, espero poder ayudar a alguien. si el menú desplegable o submenú está en el lado derecho de la pantalla, está abierto en el lado izquierdo, si el menú o submenú está en el lado izquierdo, está abierto en el lado derecho.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

Para detectar la posición vertical también puede agregar

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

JD11
fuente
¿Se puede ajustar como arriba y abajo también? Si el enlace desplegable está en la parte inferior, ¿me gustaría abrirlo en la dirección superior? ¿Podemos lograr esto?
Santosh
1
He actualizado mi respuesta para detectar la posición vertical.
JD11
1

Boostrap tiene una clase para eso llamada navbar-right. Entonces su código se verá de la siguiente manera:

<ul class="nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
    </li>
</ul>
Andrei Stalbe
fuente
0

Si desea centrar el menú desplegable, esta es la solución.

<ul class="dropdown-menu" style="right:auto; left: auto;">
John Dekker
fuente