Bootstrap 3 Navbar Comprimi menu a sinistra per elementi di barra sinistra e destra

Question

Ho una barra di navigazione Bootstrap 3 con elementi di navigazione sinistro e elementi di navigazione destra (come mostrato di seguito).

Quando è crollato, voglio sia la barra di navigazione-ginocchiera (AKA menu 'hamburger') e le sue voci da allineati a sinistra.

Il mio codice finora:

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

Il CSS per avere la barra di navigazione-levetta a sinistra è:

@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; 
    } 
} 

ho aggiunto uno stile di "pull-diritto" di avere gli elementi allineato, senza successo.

La "barra di destra" funziona male. In effetti, con esso, avrò entrambi gli elementi della mano destra sulla stessa riga. Usando "pull-right" funzionano come singole righe, ma restano sulla destra.

Questo mi lascia con:

• Il menù hamburger a sinistra (a piacere),
• Gli elementi della barra di navigazione a sinistra sulla sinistra (a piacere),
• la barra di navigazione elementi di destra sono ancora sulla destra (voglio che questo sia risolto!).

Il risultato finale:

Il frammento di codice è here.

Answer 1

ho fatto un paio di modifiche alla vostra CSS e il markup che è possibile visualizzare here.

Una cosa mi piacerebbe sottolineare è che pull-right e l'altra pull e push classi sono per riorganizzare le colonne della griglia.

Answer 2

È possibile utilizzare la regola !important per sovrascrivere il comportamento predefinito di pull-right.

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

uscita in < 768px dispositivi:

Bootply