burbuja desplegable de arranque alinear a la derecha (no empujar a la derecha)

90

Tengo carrito en mi menú superior, usando push-righty mi problema es que la burbuja desplegable se sale de la página. Estoy tratando de alinear la burbuja a la derecha, de modo que se alinee a la derecha con 'clic'

Me gusta esto

ingrese la descripción de la imagen aquí

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>
no0ne
fuente
2
Es mejor ingresar a jsfiddle.net para mostrarles a otros lo que tienes.
JofryHS
has probado right:0;en el menú desplegable?
Rahul

Respuestas:

191

Bootstrap 3.1+

Añadiendo la clase .dropdown-menu-right al mismo div que contiene el menú desplegable de la clase:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 y 3.0

Agregue la clase .pull-right al mismo div que contiene el menú desplegable de la clase

<div class="dropdown-menu pull-right">
    STUFF
</div>

Esto parece funcionar para mí usando bootstrap 3.0

meetri
fuente
20
Desde v3.1.0 puede usar dropdown-menu-right . Ver github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
Laurent Dezitter
19

Esto se puede resolver con la clase bootstrap dropdown-menu-right con dropdown-menuque es específicamente para este problema que utiliza las propiedades css right: 0;y left: auto;a align derecho ella.

Esta solución me está funcionando.

Fuente: http://getbootstrap.com/components/#btn-dropdowns-dropup (vaya a las herramientas de desarrollador para esto)

Jaspreet Singh
fuente
1
Sí, esta es la solución correcta (Bootstrap 3.3.7). Solo asegúrese de agregar la clase dropdown-menu-righta la ulque contiene las opciones del menú (no al botón)
Miguel
6
<div class="dropdown-menu dropdown-menu-right">

Esto todavía funciona en boostrap 4.2.1 :)

Georgi Peev
fuente
5

en bootstrap v 3.1.0la respuesta a esta pregunta es diferente.

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>
Entusiasta de la codificación
fuente
2

¡Ok lo tengo!

position:relative;left:0 en <ul class="dropdown-menu">

no0ne
fuente