Twitter Bootstrap, utrzymuj menu wyrównane do szerokości kontenera

Question

Moje pytanie brzmi: w jaki sposób mogę uzyskać zawartość nawigacji dopasować do szerokości treści strony i nie być w 100%. Nadal chcę, aby tło czarnej nawigacji było w 100%. Możesz to osiągnąć za pomocą narzędzia navbar-fixed-top, ale nie chcę, aby mój nav został naprawiony. Zwykle kontener robi to za Ciebie, ale w tym scenariuszu nie powoduje automatycznego marginowania zawartości.

Mam menu nawigacji w ten sposób.

<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

Wymyśliłem to, więc jeśli ktoś potrzebuje wiedzieć, to jest rozwiązanie. Mam całą moją nawigację owiniętą w # id-góry-góry id. Jest to zalecane, aby nie zastąpić Bootstrap na całym świecie.

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

Wymusza to .container mieć szerokość w każdej rozdzielczości, nawet jeśli nie jest ustalony.