Pregunta Desplegable de Bootstrap: posicionamiento del contenido desplegable


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 se encuentra 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 el lugar inferior derecho del texto. ¿Cómo puedo hacer eso?

Gracias y saludos.


74
2017-07-28 03:59


origen


Respuestas:


Editar: 

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

Puede usar la clase 'dropdown-right' para alinear el lado derecho del menú con el cursor:

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

A right-aligned menu

Violín de trabajo aquí: http://jsfiddle.net/jaq54yw8/

He dejado mi respuesta anterior a continuación solo en caso de que alguien esté usando Bootstrap <3.1.0, pero en general debería estar utilizando lo anterior (y si no parece estar funcionando) ¡comprueba dos veces el número de versión de Bootstrap que estás incluyendo)!

Puede usar la clase 'pull-right' para alinear el lado derecho del menú con el cursor:

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

142
2017-10-08 16:52



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 la configuración para hacer esto, no a través del css anterior.

Aclamaciones.


44
2017-07-28 04:38



Basado en el documento Bootstrap:

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

p.ej:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

17
2017-12-06 04:50



Si desea mostrar el menú, simplemente agregue la clase "dropup"
y elimine el "menú desplegable" de clase si existe desde el mismo div.

<div class="btn-group dropup">

enter image description here


7
2017-10-11 09:01



Boostrap tiene una clase para eso llamado 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>

1
2017-08-19 19:17



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

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

0
2018-01-31 04:59



usa este código:

<ul class="dropdown-menu" role="menu">
  <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li>
</ul>

-3
2018-02-18 18:45