Comment justifier-nav dans navbar Bootstrap 3

Question

je tente de justifier une navbar (rendre le contenu de la barre de navigation stretch) dans Bootstrap 3. J'ai ajouté margin: 0 auto; max-width: 1000px; aux nav* des classes, et aussi tenté d'ajouter un élément container comme un parent au ul. Comme dernière vérification, j'ai fait ce qui a été suggéré in this answer en ajoutant navbar-justified à la classe navbar, mais cela a causé que tout soit écrasé ensemble sur la gauche sans justifier toute la barre de navigation.

Faire un nav nav-justifiedul ne fait le centre ul, mais il ne conserve pas les styles de la classe navbar-nav car il ne fait pas partie de la ul, et il ne semble pas grand lorsque l'écran est plus petit que 768px.

Comment justifier un Bootstrap 3 navbar?

Edit: Pour ceux qui sont intéressés par une réponse plus complète, est un code ici, je l'utilise dans la production:

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

Et here is a working jsFiddle. Vous devrez peut-être étirer la taille de la boîte result pour qu'elle s'affiche correctement. Si vous êtes intéressé par le centrage de la liste réelle sans que le nav ne s'étende sur toute la largeur, voir David Taiaroa's jsFiddle.

Answer 1

Il s'avère qu'il existe une propriété float: left par défaut sur tous les éléments navbar-nav>li, ce qui explique pourquoi ils se sont tous écrasés vers la gauche. Une fois que j'ai ajouté le code ci-dessous, il a fait le navbar à la fois centré et non froissé.

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

Hope this helps quelqu'un d'autre qui cherche à centrer un navbar.

Answer 2

Vous pouvez justifier le contenu de la barre de navigation en utilisant:

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

Voir ce live: http://jsfiddle.net/panchroma/2fntE/

Bonne chance!

Answer 3

Pour justifier le bootstrap 3 navbar-nav justifier menu pour une largeur de 100%, vous pouvez utiliser ce code:

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

et pour le 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; 
    } 
} 

le voir en direct http://www.bootply.com/103172

Answer 5

Voici une solution plus simple. il suffit de supprimer la classe "navbar-nav" et d'ajouter "nav-justifié".

Answer 6

Je sais que c'est un ancien article mais j'aimerais partager ma solution. J'ai passé plusieurs heures à essayer de faire un menu de navigation justifié. Vous n'avez pas besoin de modifier quoi que ce soit dans bootstrap css. Juste besoin d'ajouter la bonne classe dans le code 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> 

Ce code CSS va supprimer simplement la classe marque navbar lorsque l'écran atteint 768px.

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

Answer 7

Salut, vous pouvez utiliser le code ci-dessous pour 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>