Center Navbar en Twitter Bootstrap 2.0

Question

Supongamos que tenemos el siguiente marcado para la barra de navegación usando Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner pull-center"> 
     <ul class="nav"> 
     <li class="active"><a href="#">HOME</a></li>       
     <li><a href="#contact">CONTACT</a></li> 
     </ul>   
    </div> 
</div> 

¿Cuál es la mejor forma de centro de .nav dentro navbar-inner?

Sólo he venido para arriba con la adición de mis propios estilos CSS:

@media (min-width: 980px) { 
    .pull-center { 
     text-align: center; 
    } 
    .pull-center > .nav { 
     float:none; 
     display:inline-block; 
     *display: inline; *zoom: 1; 
     height: 32px; 
    } 
} 

Answer 1

Sustituir el ancho del contenedor dentro de la barra de navegación auto-960px.

.navbar-inner .container {width:960px;} 

Answer 2

Simplemente utilizando la clase de contenedor según http://twitter.github.com/bootstrap/components.html#navbar está centrando mi navegador; sin embargo, es de ancho fijo y el formateo está desactivado (la altura de la barra de navegación aumenta y es muy posible que algo esté haciendo mal).

Sería bueno tener el navegador centrado en un ancho fluido, porcentual, con un ancho mínimo, basado en el tamaño mínimo de pantalla del dispositivo compatible, y nowrap. (Soy un novato con las consultas de medios receptivos y tal vez sea la mejor alternativa al porcentaje.)

Investigando aún el ancho mínimo y el nowrap, pero otra alternativa al ancho fijo de la clase de contenedor de arranque es agregar un niño de la barra de navegación interna Me gustaría saber si existe una solución de rutina de arranque incorporada, como las clases row-fluid y spanN, pero tampoco he podido formatearla correctamente en el navegador.

<div style="margin-left: 15%; margin-right: 15%;"> 

Answer 3

He encontrado esto útil y limpio:

<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">HOME</a></li>       
     <li><a href="#contact">CONTACT</a></li> 
     </ul>   
    </div> 
</div> 

donde, CSS es:

.container {left:auto;right:auto} 

Esto centrará el div en la base de la anchura de la barra de navegación actual.

La receptividad se maneja aparte.

Answer 4

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 5

para alinearlo en el centro con un ancho dinámico, que utilizó la siguiente:

HTML:

<div class="navbar"> 
    <div class="navbar-inner"> 
    <ul class="nav"> 
     .... 
    </ul> 
    </div> 
</div> 

CSS:

.navbar .navbar-inner { 
    text-align: center; 
} 
.navbar .navbar-inner .nav { 
    float: none; 
    display:inline-block; 
} 

no prueba que , pero supongo que solo display:inline-block; podría ser un problema, que es compatible con todos los navegadores, excepto con IE7 y versiones anteriores ..

http://caniuse.com/inline-block