Bootstrap: centre alcuni elementi della barra di navigazione

Question

Mi piacerebbe avere una barra di navigazione di bootstrap in cui alcuni elementi di nav sono giustificati a sinistra, alcuni sono giustificati a destra e alcuni sono centrati nello spazio rimanente tra loro.

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li><a>Left</a></li> 
     </ul> 
     <ul class="nav nav-center"> 
      <li><a>Center 1</a></li> 
      <li><a>Center 2</a></li> 
     </ul> 
     <ul class="nav pull-right"> 
      <li><a>Right</a></li> 
     </ul> 
    </div> 
</div> 

Questo jsfiddle http://jsfiddle.net/b7whs/ mostra questo - I'd come il Centro 1 e 2 Centro nav articoli per stare insieme, concentrato nella barra di navigazione. È possibile?

Ci sono molti suggerimenti qui su SO su come farlo; nessuno di loro ha funzionato per me. È possibile?

Nel mio caso, ciò che è a sinistra ea destra sarà sempre della stessa dimensione, quindi penso che dovrebbe essere fattibile.

Answer 1

Hai solo bisogno di un paio di stili per ottenere il comportamento che credo si voleva. Sembra che tu stia percorrendo la rotta display:inline-block per centrare gli elementi, quindi continuerò con questo approccio. Per gli stili esistenti, aggiungere/modificare le definizioni in modo che questi stili sono inclusi:

.nav.nav-center { 
    margin:0; 
    float:none; 
} 

.navbar-inner{ 
    text-align:center; 
} 

Con questo, le due opzioni dovrebbero spostarsi al centro esatto della barra di navigazione. Ecco un JSFiddle example per mostrarti come sarebbe. Spero che questo sia quello che stavi cercando! In caso contrario, fatemi sapere e sarò felice di aiutare ulteriormente.

Answer 2

uso questo css in realtà bootstrap li e ul flottante rimasto http://jsfiddle.net/b7whs/4/

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.nav.nav-center { 
    display: inline-block; 
    left: 0; 
    right: 0; 
    text-align:center;width:70%; 
} 
.nav.nav-center li,.nav.nav-center li a{display:inline;float:none;line-height:40px;} 

Answer 3

Ho appena scoperto la soluzione oggi stesso.

basta aggiungere il CSS come:

/* center the navbar*/ 
.center.navbar .nav, 
.center.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.center .navbar-inner { 
    text-align:center; 
} 

.center .dropdown-menu { 
    text-align: left; 
} 

e aggiungere classe centro alla barra di navigazione come questo

<div class="navbar navbar-inverse navbar-fixed-top center"> 
    <div class="navbar-inner"> 
    <div class="container center"> 
     ---- 
    </div> 
    </div> 
</div> 

Answer 4

aggiungere questo codice

<div class="col-lg-4 col-lg-offset-5 col-xs-2 col-xs-offset-4"> <ul class=" nav navbar-nav "> <li><a href="#">products</a></li> </ul> </div>