Bootstrap 3 menu Réduire la barre de navigation à gauche pour les éléments de barre de navigation gauche et droite

Question

J'ai une Bootstrap 3 barre de navigation avec des éléments de navigation gauche et des éléments de navigation droite (comme indiqué ci-dessous).

Une fois réduit, je veux que la barre de navigation (AKA le `` menu hamburger '') et ses éléments soient alignés à gauche.

Mon code jusqu'à présent:

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

Le CSS pour avoir le navbar-toggle sur la gauche est:

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

J'ai ajouté un style "pull-right" pour aligner les éléments, sans succès.

Le "navbar-right" fonctionne mal. En fait, avec elle, j'aurai les deux éléments de droite sur la même ligne. En utilisant "pull-right", ils fonctionnent comme des lignes simples, mais restent toujours à droite.

Cela me laisse avec:

• Le menu hamburger à gauche (au choix),
• Les éléments de la barre de navigation gauche sur la gauche (comme vous le souhaitez),
• Les éléments de la barre de navigation de droite sont toujours à droite (je veux que cela soit corrigé!).

Le résultat final:

L'extrait de code est ici .

Answer 1

J'ai fait quelques ajustements à votre CSS et à votre balisage que vous pouvez voir ici .

Je voudrais souligner que pull-right et les autres classes pull et Push sont destinées à réorganiser les colonnes de la grille.

Answer 2

Vous pouvez utiliser le !important règle pour remplacer le comportement par défaut de pull-right.

@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
} 

Sortie sur <768px:

( Bootply