html - usar - bootstrap w3schools

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

Question

Quiero implementar el menú desplegable de Twitter bootstrap, 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 al lado del borde derecho de la pantalla y cuando hago clic en mi menú desplegable, la lista sale de la pantalla. Se ve como en la pantalla:

¿Cómo puedo arreglarlo?

Answer 1

Puedes usar la clase .dropdown-pull-right con la 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>

Answer 2

Debido a que Bootstrap v3.1.0 agregando .pull-right está en desuso en los menús desplegables. A .dropdown-menu-right debería agregarse a ul.dropdown-menu lugar. deprecated

Answer 3

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

http://codeply.com/go/w2MJngNkDQ

Answer 4

agregando .pull-right a ul.dropdown-menu debería hacerlo

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

Answer 5

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-right al último elemento

Answer 6

float-*-right para Bootstrap 4

* = xs, sm, md, lg