Centrer la navigation dans Twitter Bootstrap

Question

Je veux pouvoir centrer la page morte de navigation au milieu d'une page et la garder centrée dans différentes résolutions. Je ne veux pas utiliser de décalage pour le pousser ou la laisser à gauche car cela le ferait simplement foirer dans différentes largeurs de navigateur. C’est le bar typique avec lequel je déconne, mais le ul finit toujours par s’aligner à gauche.

      <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->
 

Answer 1

Duplication possible de la barre de navigation Modify twitter bootstrap . Je suppose que c’est ce que vous recherchez (copie):

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

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

Comme indiqué dans la réponse liée, vous devez créer une nouvelle classe avec ces propriétés et l'ajouter à la div de navigation.

Answer 2

Pour ceux qui en ont besoin pour Bootstrap 3, c'est maintenant beaucoup plus facile.

La nouvelle classe nav-justified peut être utilisée pour centrer tous les liens de la barre de navigation.

http://www.bootply.com/g3g125MLGr

Ou, avec un peu de CSS, vous pouvez centrer uniquement la marque / le logo et garder les liens gauche / droite séparés.

http://www.bootply.com/3iSOTAyumP

Answer 3

Vous pouvez définir la largeur fixe .navbar , puis définir ses marges gauche et droite sur auto .

Démo

 .navbar{
    width: 80%;
    margin: 0 auto;
}​
 

Answer 4

http://www.bootply.com/3iSOTAyumP Dans cet exemple, le bouton de réduction ne peut pas être cliqué car la marque .navbar était devant.

http://www.bootply.com/RfnEgu45qR il existe une version mise à jour où les boutons de réduction sont réellement cliquables.