Barre de navigation Twitter Bootstrap - Menu déroulant aligné à droite

Question

J'utilise le Twitter Bootstrap (v2.1.1) avec un site PHP. Je génère la barre de navigation dynamiquement dans un script php car la barre de navigation aura un contenu différent si l'utilisateur est connecté ou non au site.

Je voudrais aligner le dernier menu déroulant sur la droite de l'écran mais je n'y suis pas parvenu jusqu'à présent. Voici un jsFiddle montrant une version simplifiée :

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

Je voudrais que le menu déroulant 2 soit aligné à droite. Le code de la dernière liste déroulante est le même que celui des autres listes déroulantes :

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

J'ai essayé de le changer pour :

<li class="dropdown pull-right">

mais cela ne fait aucune différence. Quelqu'un sait-il comment tirer le menu déroulant vers la droite comme on peut le faire avec les formulaires et les formulaires en ligne ? <p> texte ?

Answer 1

Vous devez modifier le .pull-right à la classe ul au lieu de l'élément 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>

---

Version 2.1.1

J'ai réécrit votre code en n'incluant que les plugins JavaScript nécessaires (bootstrap-dropdown.js), la dernière version de Twitter Bootstrap (2.1.1) et la prise en charge du responsive design.

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

Si vous voyez le menu réactif dans le lien ci-dessus, vous pouvez voir le "résultat large" dans ce lien :

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

.pull-right est défini par :

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

---

Version 3.1.1

Il n'y a pas eu de changement dans cette classe. Vous pourriez voir le classes d'aides section.

Cependant, la documentation recommande d'utiliser la classe .navbar-right parce qu'il dispose de certaines optimisations spécifiques, contrairement à l'option pull-right classe.

Answer 2

Pour ceux qui utilisent Bootstrap 3 , .navbar-right ferait l'affaire.

Par exemple..,

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

Answer 3

Au lieu de tirer sur le li vers la gauche, il suffit de contenir l'élément que vous souhaitez aligner à droite dans son propre élément ul et le remplacer comme suit :

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>

Démonstration : http://jsfiddle.net/AUgEA/1/