Il menu a discesa di bootstrap di Twitter esce dallo schermo: html, css, twitter-bootstrap

Voglio implementare il menu a discesa di bootstrap di Twitter, ecco il mio codice:

<span class="dropdown">
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/images//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>

Il menu a discesa funziona correttamente, il mio menu a discesa viene posizionato accanto al bordo destro dello schermo e quando faccio clic sul mio menu a discesa, l'elenco non rientra nello schermo. Sembra sullo schermo:

Come posso aggiustarlo?

risposte:

aggiungendo .pull-right a ul.dropdown-menu dovrebbe farlo

Avviso di cancellazione: A partire da Bootstrap v3.1.0, .pull-right nei menu a discesa è deprecato. Per allineare a destra un menu, utilizzare .dropdown-menu-right.

Dall'aggiunta di Bootstrap v3.1.0 .pull-right è deprecato nei menu a discesa. UN .dropdown-menu-right dovrebbe essere aggiunto a ul.dropdown-menu anziché. Documenti

Puoi usare la classe .dropdown-pull-right con i seguenti 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>

una soluzione che non ha bisogno di modificare l'HTML solo il CSS

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

È particolarmente utile per i menu generati dinamicamente, dove non è sempre possibile aggiungere la classe consigliata dropdown-menu-right fino all'ultimo elemento

Per Bootstrap 4, aggiungendo dropdown-menu-right lavori. Ecco un esempio funzionante ..

http://codeply.com/go/w2MJngNkDQ

float-*-right per Bootstrap 4

* = xs, sm, md, lg