Barra de navegación Twitter Bootstrap - menú desplegable Alinear a la derecha

Question

Estoy usando Twitter Bootstrap (v2.1.1) con un sitio PHP. Estoy generando la barra de navegación dinámicamente en una secuencia de comandos php, ya que la barra de navegación tendrá contenido diferente si el usuario está conectado o fuera del sitio.

Me gustaría alinear el último menú desplegable a la derecha de la pantalla pero no he podido hasta ahora. He aquí una jsFiddle que muestra una versión simplificada:

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

Me gustaría que el menú 2 a estar bien alineados. El código de la última para desplegable es el mismo que para otros menús desplegables:

<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>   

He intentado chaging a:

<li class="dropdown pull-right"> 

pero eso no hace ninguna diferencia. ¿Alguien sabe cómo sacar el menú desplegable a la derecha como lo hace con los formularios y el texto <p>?

Answer 1

Tiene que cambiar la clase .pull-right por ul elemento inst ead de 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> 

---

Versión 2.1.1

Reescribí su código JavaScript que incluye plugins necesarios solamente (en arranque-dropdown.js), la última versión de Twitter Bootstrap (2.1.1) y soporte para un diseño receptivo.

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

Si aparece el menú de respuesta en el enlace anterior, se puede ver el "número de ancho" en este enlace:

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

.pull-right se define por:

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

---

Versión 3.1.1

No hubo cambios en esta clase. Es posible que vea la sección helpers classes.

Sin embargo, la documentación recomienda utilizar la clase .navbar-right porque tiene algunas optimizaciones específicas, a diferencia de la clase pull-right.

Answer 2

En vez de tirar el elemento li a la izquierda, sólo tiene que contener el elemento que desea estar alineado a la derecha dentro de su propia lista ul y tire de que en lugar de este 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> 

Demostración: http://jsfiddle.net/AUgEA/1/

Answer 3

Para aquellos que usan Bootstrap 3, .navbar-right harían el truco.

Por ejemplo.,

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

Answer 4

Si usted vino aquí tratando de derecha alinear un arranque normal .dropdown-menu y NO un .nav, y están utilizando Bootstrap 3, la clase correcta para agregar es .dropdown-menu-right

Aquí está la bootstrap documentation:

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