Zentrieren Sie das Nav in Twitter Bootstrap

Question

Ich möchte in der Lage sein, die nav dead Mitte einer Seite zu zentrieren und es in verschiedenen Auflösungen zentriert bleiben. Ich möchte keine Offsets verwenden, um es zu verschieben oder zu margin-left, da dies nur in verschiedenen Browser-Breiten versauen würde. Dies ist die typische Bar, mit der ich rumspaziere, aber die ul geht immer linksbündig hoch.

 <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

Mögliche Duplikat Modify twitter bootstrap navbar. Ich denke, das ist, was Sie für (kopiert) suchen:

.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; 
} 

Wie in der verknüpften Antwort angegeben, sollten Sie eine neue Klasse mit diesen Eigenschaften machen und es dem nav div hinzuzufügen.

Answer 2

können Sie die .navbar feste Breite machen, dann setzen es linke und rechte Rand zu auto.

Demo

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

Answer 3

Für alle, die dies für Bootstrap 3 benötigen, ist es jetzt viel einfacher.

Die neue nav-justified Klasse können Sie die linke nur die Marke/das Logo, und halten alle die navbar Links ..

http://www.bootply.com/g3g125MLGr

<div class="navbar"> 
    <ul class="nav nav-justified" id="myNav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
</div> 

Oder mit ein wenig CSS zum Zentrum verwendet werden, Zentrieren/rechts-Links trennen ..

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

Answer 4

http://www.bootply.com/3iSOTAyumP in diesem Beispiel die Taste für collap Das war nicht anklickbar, weil die .navbar-Marke vorne war.

http://www.bootply.com/RfnEgu45qR Es gibt eine aktualisierte Version, in der die Minimierungsschaltflächen tatsächlich anklickbar sind.

Answer 5

.navbar-right { 
    margin-left:auto; 
    margin-right:auto; 
    max-width :40%; 
    float:none !important; 
} 

nur diesen Code kopieren und max-width ändern, wie Sie

wie

Answer 6

Ich ziehe diese:

<nav class="navbar"> 
    <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div"> 
    <!-- this element is on the center of the nav, visible only on -md and -lg --> 
    <a></a> 
    </div> 

    <div class="container-fluid"> 
    <!-- ...things with your navbar... --> 
     <div class="visible-xs visible-sm"> 
     <!-- this element will be hidden on -md and -lg --> 
     </div> 
    <!-- ...things with your navbar... --> 
    </div> 
</nav> 

Das Element perfekt zentriert ist, und wird auf einigen Bildschirmgrößen versteckt werden (es gab keine Platz links auf -xs und -sm für mich zum Beispiel). Ich bekomme die Idee von Twitter tatsächlichen navbar

Answer 7

-Code Grund nav Bootstrap

<!--MENU CENTER`enter code here` RESPONSIVE --> 
 

 
    <div class="container-fluid"> 
 
     <div class="container logo"><h1>LOGO</h1></div> 
 
     <nav class="navbar navbar-default menu"> 
 
     <div class="container-fluid"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
 
      </div> 
 
      <!-- Collect the nav links, forms, and other content for toggling --> 
 
      <div class="collapse navbar-collapse" id="defaultNavbar2"> 
 
      <ul class="nav nav-justified" > 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
      </ul> 
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
     </nav> 
 
    </div> 
 
    <!-- END MENU-->

Answer 8

Für Bootstrap diese v4 überprüfen verwendet:

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

nur hinzufügen Klasse UL .pagination:

<nav"> 
    <ul class="pagination justify-content-center"> 
    <li class="page-item disabled"> 
     <a class="page-link" href="#" tabindex="-1">Previous</a> 
    </li> 
    <li class="page-item"><a class="page-link" href="#">1</a></li> 
    <li class="page-item"><a class="page-link" href="#">2</a></li> 
    <li class="page-item"><a class="page-link" href="#">3</a></li> 
    <li class="page-item"> 
     <a class="page-link" href="#">Next</a> 
    </li> 
    </ul> 
</nav>