Barra di navigazione di avvio di Twitter - Menu a discesa di allineamento a destra

Question

Sto utilizzando Twitter Bootstrap (v2.1.1) con un sito PHP. Sto generando la barra di navigazione in modo dinamico in uno script php poiché la barra di navigazione avrà contenuto diverso se l'utente è connesso o fuori dal sito.

Vorrei allineare l'ultimo menu a discesa alla destra dello schermo ma non sono stato in grado di arrivare fino a quel momento. Ecco un jsFiddle che mostra una versione semplificata:

http://jsfiddle.net/fmdataweb/AUgEA/

vorrei che il menu a 2 verso il basso per essere allineato a destra. Il codice per l'ultimo discesa è lo stesso che per gli altri menù a discesa:

<li class="dropdown pull-right"> 
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href="propertiesSearch.php">Logout</a></li> 
</ul> 
</li>   

Ho provato chaging a:

<li class="dropdown pull-right"> 

ma che non fa differenza. Qualcuno sa come tirare il menu a tendina a destra come è possibile con i moduli e il testo <p>?

Answer 1

È necessario modificare la classe .pull-right in ul elemento inst ead di li.

HTML

<ul class="nav pull-right"> 
    <li class="dropdown"> 
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown"> 
     Menu 2 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="propertiesSearch.php">Logout</a></li> 
    </ul> 
    </li> 
</ul> 

---

versione 2.1.1

ho riscritto il codice includendo i plugin JavaScript solo necessari (bootstrap-dropdown.js), l'ultima versione di Twitter Bootstrap (2.1.1) e supporto per la progettazione reattiva.

http://jsfiddle.net/caio/gvw7j/

Se vedi il menu di reattivo nel link qui sopra, è possibile vedere il "risultato larga" in questo link:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right è definito da:

.pull-right { 
    float: right !important; 
} 

---

Versione 3.1.1

Non ci sono stati cambiamenti in questa classe. Potresti visualizzare la sezione helpers classes.

Tuttavia, la documentazione consiglia di utilizzare la classe .navbar-right perché presenta alcune ottimizzazioni specifiche, a differenza della classe pull-right.

Answer 2

Invece di tirare l'elemento li a sinistra, semplicemente contenere quell'elemento che si desidera essere allineato a destra all'interno della propria ul lista e tirare che invece in questo modo:

HTML

<ul class="nav pull-right"> 
    <li class="dropdown"> 
     <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="propertiesSearch.php">Logout</a></li> 
     </ul> 
    </li>  
</ul> 

Demo: http://jsfiddle.net/AUgEA/1/

Answer 3

Per quelli che utilizzano Bootstrap 3, .navbar-right farebbe il trucco.

Per per esempio.,

<ul class="nav navbar-nav navbar-right"> 
. 
. 
</ul> 

Answer 4

Se sei arrivato qui cercando di allineare a destra un bootstrap regolare .dropdown-menu e NON un .nav, e si utilizza Bootstrap 3, la classe corretta da aggiungere è .dropdown-menu-right

Ecco il bootstrap documentation:

<ul class="dropdown-menu dropdown-menu-right"> 
    ... 
</ul>