Comment faire pour aligner à gauche bootstrap 3 menu déroulant?

Dans l'image ci-dessus MenuItems sont aligner à droite de la MyMenu, j'en avais besoin pour aligner à gauche le MenuItems de MyMenu (je veux dire qu'il doit aligné à gauche de MyMenu), j'essaie d'utiliser tirez-gauche et tirez-droit classe comme <ul class="dropdown-menu pull-left" role="menu"> avec mon code mais il ne fonctionne pas. quelqu'un a une idée de comment faire cela ?

Voici mon code

<!-- Static navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

              <ul class="nav navbar-nav navbar-right text-uppercase">
                <li><a id="Home" href="index.html">Home</a></li>
                <!-- Visa drapdown-->
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>

                  <ul class="dropdown-menu pull-left" role="menu">
                    <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 02</a></li>
                      <li><a href="#">Menu Item 03</a></li>
                      <li><a href="#">Menu Item 04</a></li>
                      <li><a href="#"></a></li>

                    </ul>

                  </li>

            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>

OriginalL'auteur Selaru Sinbath | 2014-11-29

19

L'ajout de cet élément de style à la liste déroulante <ul> permettra d'aligner le menu déroulant à gauche de l'élément de menu:
```
left:0;
```
Voir ce Bootply qui cible les .dropdown-menu.pull-left et ajoute un left:0;.
Cela devrait résoudre votre problème.

Mise à jour

Je vois que Bootstrap a obsolète pull-droite et tirez-de gauche comme de Bootstrap 3.1.0. Utilisation dropdown-menu-left classe à utiliser intégré dans le Bootstrap css pour aligner le menu déroulant sur la gauche de bord de sorte que vous n'avez pas besoin de CSS. Voir cette mise à jour Bootply

Ces deux liens sont cassés....
Oui cette réponse est de l'an dernier, il est donc possible que les liens brisés ... d'Ailleurs l'ensemble de la bootply site ne se charge pas correctement pour moi, alors peut-être qu'ils sont juste à avoir quelques problèmes ...
Seulement environ 7 mois. Ouais j'espère que leur liens de police disparaître comme twitter. c'est censé être un wiki en gros.
si nous avons la réponse et le lien vers des pages externes, comme Bootply pour illustrer une solution, nous ne pouvons pas garantir que ces liens pour séjour de travail. L'objectif de Stackoverflow est de ne pas être un wiki, nous essayons d'aider les uns les autres avec des problèmes de programmation et de questions. Sur le sujet, j'obtiens une erreur de l'application, donc je pense que le Bootply liens ne fonctionne de nouveau bientôt.
Dans le cas où il n'est pas évident pour tout le monde, les deux classes doivent être ajoutés: <ul class="dropdown-menu dropdown-menu-left">.

OriginalL'auteur B_s

pour Twitter Bootstrap 3

<div class="dropdown-menu pull-right">
    <!-- write your code here -->
</div>

espère que cela aide 🙂

OriginalL'auteur Abhishek Goel

16

Pour Bootstrap 3.1.0 ou au-dessus de l'utilisation .dropdown-menu-left ou .dropdown-menu-right pour afficher le menu déroulant à gauche ou à droite du menu parent. Dans votre cas, essayez de la suivre.
```
 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
      <ul class="dropdown-menu dropdown-menu-left" role="menu">
       
      </ul>
 </li>
```
Bootstrap est le MEILLEUR

Ne fonctionne pas avec Bootstrap 3.3

OriginalL'auteur Shivek Parmar
5

Changement navbar-droit de la barre de navigation de gauche et ajouter un pull-droit classe de l'UL.
```
<ul class="nav navbar-nav navbar-left text-uppercase pull-right">
```
Découvrez le JSfiddle pour un exemple.

http://jsfiddle.net/eqcpLj6k/1/

OriginalL'auteur Ryan Janvier
3

Que les réponses données ci-dessus sont trop vieux, aimerais donner des solution de travail pour Bootstrap 3.3.7.

Utiliser le css sur votre .dropdown-menu div :
```
.dropdown-left-manual {
  right: 0;
  left: auto;
  padding-left: 1px;
  padding-right: 1px;
}
```
Explication :
- "right:0;" pour les mettre à la fin de menu en ligne avec la fin de la liste déroulante
  bouton.
- "left:auto;" pour remplacer le gauche:0 dans la liste déroulante du menu
  par la classe de bootstrap.
- les rembourrages sont utilisés pour corriger plane sur la rubrique du menu, peut être ignoré.
cela fonctionne sur bootstrap 4.1
Seule solution qui a fonctionné pour moi!
Je n'ai pas de vérifier avec la 4.1. Merci de laisser tout le monde sais.

OriginalL'auteur Suyash Gulati

Vous devez vous connecter pour publier un commentaire.