Jak uzasadnić NavBar-nav w Bootstrap 3

Question

Ja próbując usprawiedliwić navbar (marka zawartość paska nawigacyjnego rozciągnąć) w Bootstrap 3. Dodałem margin: 0 auto; max-width: 1000px; do nav* klas, a także próbowali dodać jako element container rodzic do ul. W ramach ostatniego sprawdzenia zrobiłem to, co zasugerowano in this answer, dodając navbar-justified do klasy navbar, ale spowodowało to, że wszystko scrunch razem po lewej bez uzasadnienia całego paska nawigacyjnego.

Wykonanie operacji nav nav-justifiedul robi centrum ul, ale nie zachowuje stylów klasy navbar-nav ponieważ nie jest częścią ul, i nie wygląda wspaniale, gdy ekran jest mniejszy niż 768px.

Jak mogę uzasadnić Bootstrap 3 navbar?

Edit: Dla tych, którzy są zainteresowani w pełniejszej odpowiedzi, tu jest jakiś kod używam w produkcji:

// Stylesheet 
.navbar-nav>li { 
    float: none; 
} 

// Navbar 
<nav class="navbar navbar-default"> 
    <ul class="nav nav-justified navbar-nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="group.html">Group</a></li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="positions.html">Positions</a></li> 
    </ul> 
</nav> 

I here is a working jsFiddle. Być może trzeba będzie rozciągnąć rozmiar pudełka, aby był prawidłowo wyświetlany. Jeśli chcesz wyśrodkować aktualną listę bez nawigacji rozciągającej się na pełną szerokość, zobacz David Taiaroa's jsFiddle.

Answer 1

Okazuje się, że domyślnie istnieje domena float: left dla wszystkich elementów navbar-nav>li, dlatego wszystkie one były zgniatane w lewo. Kiedy dodałem poniższy kod, zrobiłem navbar zarówno wyśrodkowany, jak i nieskurkowany.

.navbar-nav>li { 
     float: none; 
} 

Nadzieja pomaga to ktoś, kto chce wyśrodkować navbar.

Answer 2

można uzasadnić zawartość NavBar za pomocą:

@media (min-width: 768px){ 
    .navbar-nav{ 
    margin: 0 auto; 
    display: table; 
    table-layout: fixed; 
    float: none; 
    } 
} 

Zobacz to na żywo: http://jsfiddle.net/panchroma/2fntE/

Powodzenia!

Answer 3

uzasadniające bootstrap 3 navbar-nav uzasadnić menu do 100% szerokości można użyć tego kodu:

@media (min-width: 768px){ 
    .navbar-nav { 
     margin: 0 auto; 
     display: table; 
     table-layout: auto; 
     float: none; 
     width: 100%; 
    } 
    .navbar-nav>li { 
     display: table-cell; 
     float: none; 
     text-align: center; 
    } 
} 

Answer 4

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

i dla css

@media (min-width: 768px) { 
    .navbar > .container { 
     text-align: center; 
    } 
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li { 
     float: none; 
     display: inline-block; 
    } 
    .collapse.navbar-collapse { 
     width: auto; 
     clear: none; 
    } 
} 

zobacz go na żywo http://www.bootply.com/103172

Answer 5

Oto łatwiejsze rozwiązanie. po prostu usuń klasę "navbar-nav" i dodaj "wyrównane do nav".

Answer 6

Wiem, że to stary post, ale chciałbym udostępnić moje rozwiązanie. Spędziłem kilka godzin próbując stworzyć usprawnione menu nawigacyjne. Naprawdę nie trzeba modyfikować niczego w bootstrap css. Wystarczy dodać poprawną klasę w html.

<nav class="nav navbar-default navbar-fixed-top"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#top">Brand Name</a> 
     </div> 
     <div class="collapse navbar-collapse" id="collapsable-1"> 
      <ul class="nav nav-justified"> 
       <li><a href="#about-me">About Me</a></li> 
       <li><a href="#skills">Skills</a></li> 
       <li><a href="#projects">Projects</a></li> 
       <li><a href="#contact-me">Contact Me</a></li> 
      </ul> 
     </div> 
    </nav> 

Ten kod CSS będzie po prostu usunąć klasę navbar markami, gdy ekran osiągnie 768px.

media@(min-width: 768px){ 
    .navbar-brand{ 
     display: none; 
    } 
} 

Answer 7

Cześć można użyć to poniżej kod do pracy uzasadnione NAV

<div class="navbar navbar-inverse"> 
    <ul class="navbar-nav nav nav-justified"> 
     <li class="active"><a href="#">Inicio</a></li> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li> 
    </ul> 
</div>