El menú desplegable de arranque de Twitter sale de la pantalla

151

Quiero implementar el menú desplegable de arranque de Twitter, aquí está mi código:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

El menú desplegable funciona bien, mi menú desplegable se coloca junto al borde derecho de la pantalla y cuando hago clic en mi menú desplegable, la lista sale de la pantalla. Parece en la pantalla:

ingrese la descripción de la imagen aquí

¿Cómo puedo arreglarlo?

html css twitter-bootstrap pawel
fuente
La respuesta correcta (para bootstrap> = v 3.2.0) a esta pregunta se resuelve aquí: stackoverflow.com/questions/23654962/… por @cvrebert.
Michael Trouw
Creo que a su código le falta una etiqueta de intervalo de finalización: </span>
stealthysnacks

Respuestas:

263

agregar .pull-righta ul.dropdown-menudebería hacerlo

Aviso de desuso : a partir de Bootstrap v3.1.0, .pull-righten los menús desplegables está en desuso . Para alinear a la derecha un menú, use .dropdown-menu-right.

Ross
fuente
29
Esa es una pregunta completamente separada
Dewayne
14
Esta respuesta en realidad no soluciona el problema si el usuario está usando un dispositivo de pantalla más pequeño: sale del lado izquierdo en lugar del lado derecho (de hecho, simplemente cambia el pull-left al pull-right).
Anónimo
55
Ver respuesta krzychu como Bootstrap.pull-right está en desuso
Jeroen
1
@HristoEnev yo tampoco. ¿Tus menús desplegables se salieron del botón?
Choylton B. Higginbottom
116

Desde Bootstrap v3.1.0 la adición .pull-rightestá en desuso en los menús desplegables. A .dropdown-menu-rightdebe agregarse en su ul.dropdown-menulugar. Docs

krzychu
fuente
10
Incluso con el último bootstrap .pull-right funciona para mí, y .dropdown-menu-right no hace nada.
Shane Grant
De hecho, esto funciona en Bootstrap 4, excepto que agrega la clase .dropdown-menu-right a div.dropdown-menu (no ul)
Timothy Kanski
<ul class="dropdown-menu dropdown-menu-right">trabajó para mí en 4.1.1
dw1
22

Para Bootstrap 4, agregar dropdown-menu-righttrabajos. Aquí hay un ejemplo de trabajo ...

http://codeply.com/go/w2MJngNkDQ

praj
fuente
Intenté todas las otras respuestas, y esta fue la única que también funcionó para mí. Estoy usando Bootstrap v. 4.1.0.
Zeth
14

una solución que no necesita modificar el HTML, solo el CSS es

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

Es particularmente útil para menús generados dinámicamente donde no siempre es posible agregar la clase recomendada dropdown-menu-rightal último elemento

GiorgosK
fuente
1
esta es la única solución que funciona para bootstrap 4.0.0
charsi
10

Puede usar la clase .dropdown-pull-rightcon el siguiente CSS:

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
Expandir fragmento

Mohan Dere
fuente
2

en Bootstrap 4 puedes usar .dropleft

solo cambia a:

<span class="dropleft">

o

agregue .dropdown-menu- {lg, med, sm, xs} -right a su menú desplegable 

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
Dedy Setiawan
fuente
1

float-*-right para Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
fuente
0

No puedo dejar un comentario porque mi nivel de SO es demasiado bajo, pero solo me aseguré de que el contenedor principal esté configurado como "desbordamiento: oculto" de esa manera (también asegúrese de que la posición esté configurada).

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>
hackdotslashdotkill
fuente