Twitter Bootstrap, mantenere il menu allineato alla larghezza del contenitore

Question

La mia domanda è: come posso ottenere il contenuto di navigazione in modo che si adatti alla larghezza del contenuto della pagina e non al 100%. Voglio comunque che lo sfondo del nav nero sia al 100%. Puoi ottenerlo con una barra di navigazione fissa, ma non voglio che il mio sistema di navigazione sia corretto. Solitamente il contenitore fa questo per te, ma in questo scenario non margina automaticamente il contenuto.

Ho un menu di navigazione come questo.

<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

ho capito questo, quindi se qualcuno ha bisogno di sapere qui è la soluzione. Ho il mio intero nav avvolto in un # # id-topbar. Questo è raccomandato per non sovrascrivere Bootstrap a livello globale.

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

Questo costringe il .container ad avere una larghezza ad ogni risoluzione anche quando la barra di navigazione non è fissa.