Twitter Bootstrap, mantenga el menú alineado al ancho del contenedor

Question

Mi pregunta es cómo puedo hacer que el contenido de navegación se alinee con el ancho del contenido de la página y no sea 100%. Todavía quiero que el fondo de navegación negra sea 100%. Puede lograr esto con una barra fija de navegación fija, pero no quiero que se arregle mi navegador. Por lo general, el contenedor hace esto por usted, pero en este caso no compensa automáticamente el contenido.

Tengo un menú de navegación como este.

<div class="navbar"> 
    <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> 

      <a class="brand visible-phone visible-tablet" href="#">Brand</a> 

      <div class="nav-collapse"> 
       <ul class="nav"> 
        <li class="active"><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
        <li><a href="#">Item 3</a></li> 
       </ul> 

      </div> 

    </div> 
    </div> 
</div><!-- END .navbar --> 

Answer 1

Me di cuenta de esto, así que si alguien necesita saber aquí está la solución. Tengo todo mi navegador envuelto en una id # navbar-top. Esto es recomendado para que no anule a Bootstrap globalmente.

@media (min-width: 1200px) { 
    #navbar-top .container { 
     width:1170px; 
    } 
} 
@media (min-width: 979px) and (max-width: 1200px) { 
    #navbar-top .container { 
     width:960px; 
    } 
} 
@media (min-width: 768px) and (max-width: 979px) { 
    #navbar-top .container { 
     width:744px; 
    } 
} 

Esto obliga al .container tener una anchura en cada resolución, incluso cuando la barra de navegación no es fijo.