Bootstrap: wyśrodkuj niektóre elementy nawigacyjne

Question

Chciałbym mieć pasek nawigacyjny bootstrap, w którym niektóre elementy nawigacji są wyrównane do lewej strony, niektóre są wyrównane do prawej, a niektóre są wyśrodkowane na pozostałym obszarze między nimi.

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

Ten jsfiddle http://jsfiddle.net/b7whs/ pokazuje ten - jak bym Centrum 1 i 2 Centrum nav pozycji, aby być razem, skoncentrowane na pasku nawigacyjnym. czy to możliwe?

Istnieje wiele sugestii dotyczących SO w jaki sposób to zrobić; żaden z nich nie pracował dla mnie. Czy to możliwe?

W moim przypadku, to, co jest po lewej i prawej stronie, zawsze będzie tego samego rozmiaru, więc myślę, że powinno to być wykonalne.

Answer 1

Po prostu potrzebowała kilka stylów, aby uzyskać zachowanie, które myślę, że chciał. Wygląda na to, że wybierasz trasę display:inline-block, aby wyśrodkować elementy, więc po prostu kontynuuję to podejście. Do istniejących stylów, dodawać/modyfikować definicji tak, że te style są wliczone:

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

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

Z tym, obie opcje powinny poruszać się dokładnie w środku pasku nawigacyjnym. Oto JSFiddle example, aby pokazać, jak to będzie wyglądać. Mam nadzieję, że tego właśnie szukałeś! Jeśli nie, daj mi znać, a z chęcią pomożemy dalej.

Answer 2

użycie tego css faktycznie w bootstrap li i ul są pływak lewo 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

Właśnie dzisiaj znalazłem rozwiązanie.

Just Add CSS jak:

/* 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; 
} 

i dodawać centrum klasę NavBar jak ten

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

Answer 4

dodać ten kod

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