35 votos

Barra de navegación de Twitter Bootstrap - Menú desplegable alineado a la derecha

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

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

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

Me gustaría que el desplegable del Menú 2 estuviera alineado a la derecha. El código del último desplegable es el mismo que el de los demás:

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

<li class="dropdown pull-right">

pero eso no hace ninguna diferencia. Alguien sabe cómo tirar del menú desplegable hacia la derecha como se puede hacer con los formularios y <p> ¿texto?

78voto

Caio Tarifa Puntos 1604

Es necesario cambiar el .pull-right clase a ul en lugar 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 incluyendo sólo los plugins JavaScript necesarios (bootstrap-dropdown.JS), la última versión de Twitter Bootstrap (2.1.1) y soporte para el diseño responsivo.

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

Si ves el menú responsivo en el enlace anterior, puedes ver el "resultado amplio" 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. Se puede ver el clases de ayuda sección.

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

14voto

Ajoy Puntos 373

Para los que utilizan Bootstrap 3 , .navbar-right podría hacer el truco.

Por ejemplo..,

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

11voto

Andres Ilich Puntos 41712

En lugar de tirar del li a la izquierda, simplemente contenga el elemento que desea alinear a la derecha dentro de su propio ul lista y tirar de eso en su lugar así:

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/

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X