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

J'ai un Bootstrap 3 barre de navigation avec des éléments de menu de navigation de gauche et de droite nav éléments (comme illustré ci-dessous).

Lorsque s'est effondré, je veux à la fois la barre de navigation-bascule (AKA le "hamburger menu") et ses éléments pour être aligné à gauche.

Mon code pour l'instant:

<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 la barre de navigation-bascule à 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 "pull-right" style d'avoir les éléments alignés, sans succès.

La "navbar-droit" fonctionne mal. En fait, avec elle, je vais avoir à la fois de la main droite les éléments sur la même ligne.
À l'aide de "pull-right" ils travaillent comme des lignes simples, mais toujours rester sur la droite.

Cela me laisse avec:

• Le hamburger menu sur la gauche (comme souhaité),
• La barre de navigation à gauche des éléments sur la gauche (comme souhaité),
• La barre de navigation à droite les éléments sont toujours sur la droite (je veux que ce soit fixe!).

Le résultat final:

L'extrait de code de ici.

source d'informationauteur loretoparisi