pojemnik wewnątrz paska nawigacyjnego na Twitter bootstrap

Question

Mam następujący kod NavBar Korzystanie Twitter Bootstrap

<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

i wyjście jest Kiedy usunąć "width: auto" z”.navbar .container {width: auto} "w pliku bootstap.css wynik jest i jest oczekiwanym wynikiem.

https://github.com/twitter/bootstrap/issues/2093 pokazuje "width: auto" jako zamierzoną cechę. Co robię tutaj źle?

Answer 1

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

ten powinien zrobić to

Answer 2

Jeśli spojrzysz na Bootstrap basic nav bar example zobaczysz, że po obu stronach paska nawigacyjnego znajduje się margines. Dzieje się tak, ponieważ w przypadku pojemnika niepłynnego twoja strona będzie zajmować stałą szerokość, a pasek nawigacyjny będzie korzystać z tej szerokości.

Jeśli chcesz, aby pasek nawigacyjny rozciągał się na całą stronę, musisz użyć opcji class="container-fluid", ale w układzie płynnym elementy menu (domyślnie) będą wyświetlane z lewej strony strony.

W kodzie używane są zarówno container, jak i container-fluid, co jest nieprawidłowe, a zgodnie z dokumentacją Bootstrap należy umieścić nawigację w kontenerze - nie osadzać kontenera w tagach nav.

Answer 3

Rozwiązałem to, usuwając definicję width: auto z .navbar .container w bootstrap.css.

Nie jest to idealne rozwiązanie (ogólnie edycja bootstrap.css), ale było znacznie prostsze niż zastosowanie wszystkich elastycznych szerokości do selektora.

Answer 4

znalazłem inne rozwiązanie powyższego problemu.

Dodaj klasę navbar-fixed-top do głównej jednostki głównej navbar.

I dodać

.navbar-fixed-top{ 
position: relative; 
} 

do reguły CSS.

Ogranicza to menu przed przesunięciem go w lewo i działało dobrze podczas tworzenia motywu dla wordpress.