Centrar la navegación en Twitter Bootstrap

Question

Quiero ser capaz de centrar el medio de navegación muerto de una página y mantenerlo centrado en diferentes resoluciones. No quiero usar desplazamientos para empujarlos o dejarlos a la izquierda, ya que esto lo arruinaría en diferentes anchos de navegador. Este es el típico bar con el que me estoy metiendo, pero el ul siempre termina alineado a la izquierda.

 <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

duplicado Posible de Modify twitter bootstrap navbar. supongo que esto es lo que busca (copiado):

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

Como se indica en la respuesta vinculado, usted debe hacer una nueva clase con estas propiedades y añadirlo a la div nav.

Answer 2

Puede hacer que el ancho de .navbar fijo, a continuación, establezca y se deja margen derecho de auto.

Demo

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

Answer 3

Para cualquiera que necesite esto para Bootstrap 3, ahora es mucho más fácil.

La nueva clase nav-justified se puede utilizar para centrar todos los enlaces navbar ..

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> 

O con un poco de CSS puede centrar sólo la marca/logotipo, y mantener la izquierda/enlaces derecho separado ..

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

Answer 4

http://www.bootply.com/3iSOTAyumP en este ejemplo el botón de collap no se pudo hacer clic porque la marca .navbar estaba en el frente.

http://www.bootply.com/RfnEgu45qR hay una versión actualizada donde se puede hacer clic en los botones de contracción.

Answer 5

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

simplemente copiar el código y cambiar max-width como desee

Answer 6

Yo prefiero esta:

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

El elemento está perfectamente centrada, y se ocultará en algunos tamaños de pantalla (no había coloque a la izquierda en -xs y -sm para mí, por ejemplo). Me da la idea de la barra de navegación real de Twitter

Answer 7

código utilizado de navegación básica de arranque

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

Para Bootstrap v4 mira esto:

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

solamente agregar la clase 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>