Wie zu rechtfertigen Navbar-nav in Bootstrap 3

Question

Ich versuche, eine navbar (machen die Navarlinerstreckung) in Bootstrap 3 zu rechtfertigen. Ich habe margin: 0 auto; max-width: 1000px; Klassen nav* hinzugefügt, und auch versucht, ein container Element als hinzuzufügen ein Elternteil zum ul. Als letzte Überprüfung habe ich getan, was vorgeschlagen wurde in this answer durch Hinzufügen von navbar-justified in die Klasse navbar, aber dies verursacht alles zu scrunch zusammen auf der linken Seite ohne die gesamte navbar zu rechtfertigen.

Doing ein nav nav-justifiedul die ul Zentrum machen tut, aber es die Stile der navbar-nav Klasse nicht behalten hat, da sie nicht Teil der ul ist, und es toll sieht nicht so aus, wenn der Bildschirm kleiner als 768px ist.

Wie kann ich ein Bootstrap 3 navbar rechtfertigen?

Edit: Für diejenigen, die in eine vollständigere Antwort interessiert sind, hier ist einige Code, den ich in der Produktion verwenden:

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

Und here is a working jsFiddle. Möglicherweise müssen Sie die Größe der result-Box dehnen, damit sie korrekt angezeigt wird. Wenn Sie daran interessiert sind, die tatsächliche Liste zu zentrieren, ohne dass der NAV auf die volle Breite ausgedehnt wird, siehe David Taiaroa's jsFiddle.

Answer 1

Es stellt sich heraus, dass es eine float: left Eigenschaft standardmäßig auf allen navbar-nav>li Elementen gibt, weshalb sie alle nach links scrunching waren. Sobald ich den Code unten hinzugefügt habe, machte es die navbar beide zentriert und nicht zusammengeknüllt.

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

hoffe, das hilft jemand anderes, sucht einen navbar zu zentrieren.

Answer 2

Sie können die navbar Inhalte rechtfertigen, indem sie mit:

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

dieses Live-See: http://jsfiddle.net/panchroma/2fntE/

Viel Glück!

Answer 3

die Bootstrap-3 navbar-NAV zu rechtfertigen Menü auf 100% Breite rechtfertigen können Sie diesen Code verwenden:

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

und für die 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; 
    } 
} 

sieh es live http://www.bootply.com/103172

Answer 5

Hier ist eine einfachere Lösung. Entferne einfach die Klasse "navbar-nav" und füge "nav-gerecht" hinzu.

Answer 6

Ich weiß, das ist ein alter Beitrag, aber ich möchte meine Lösung teilen. Ich habe mehrere Stunden damit verbracht, ein begründetes Navigationsmenü zu erstellen. Sie müssen nichts wirklich in Bootstrap CSS ändern. Ich muss nur die korrekte Klasse in HTML hinzufügen.

Dieser CSS-Code wird einfach die Navbar-Markenklasse entfernen, wenn der Bildschirm 768px erreicht.

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

Answer 7

Hallo können Sie diesen Code unten verwenden für die Arbeit gerechtfertigt 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>