Przewijanie menu na pasku nawigacji Bootstrap

Question

Podczas korzystania z twitter bootstrap 3 w menu urządzeń mobilnych nabber są przewijane poziome i pionowe.

Nie było tam z 2.3 i nie mogłem wymyślić, jak to wyłączyć i pozwolić, aby pozycje w menu rozszerzyły się do pełnych bez żadnych pasków przewijania.

Answer 1

Jest to nowy załadowania 3.

Najlepszym sposobem na to byłoby usunąć lub zakomentować linie 52 i 53 w /less/navbar.less: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 (można ewentualnie usunąć wiersz 59) oraz przekompiluj bootstrap.less.

Jeśli nie można skompilować Bootstrap z narzędzia jak CodeKit lub Grunt, będziemy chcieli, aby napisać kwerendę mediów w dokumencie CSS, który wyróżnia i nadpisuje klasę .navbar zapadaniu może tak:

@media (max-width: 767px) { 
    .navbar-collapse { 
     max-height: auto; 
     overflow-x: auto; 
    } 
} 

Nie przetestowałem tego kodu powyżej - ponieważ udało mi się przekompilować. Być może musisz uwzględnić! Important lub coś takiego.

Answer 2

To powinno wystarczyć (jeśli przestrzegających reguł CSS 3.0)

max-height: none; 

Answer 3

Aby usunąć pionowy pasek przewijania, to trochę CSS pracował. Nie miałem poziomych pasków przewijania.

@media (max-width: 767px) { 
    .navbar-collapse { 
     max-height: none; 
    } 
} 

Answer 4

po prostu wpadł na ten sam ...

prostu absolutnie pozycja .navbar-domyślnie.

Element div div .navbar jest pozycjonowany absolutnie i należy go "dołączyć" do elementu nadrzędnego/przodka, który NIE jest statycznie pozycjonowany. Więc, po prostu dodaje:

.navbar-default { 
    position: absolute; 
} 

nie wiem o Bootstrap 4 (który po prostu miał to alfa zwolniony), ale wydaje się to zrobić trick z Bootstrap 3 NAV. Mam naprawdę długą nawigację i teraz mogę odpowiednio przewinąć i zobaczyć wszystkie elementy nawigacyjne.

Answer 5

Innym rozwiązaniem, w Boostrap 3.3.4, jest dodanie następujących do CSS:

/* No scrolling for collapsed menu */ 

.navbar-collapse.in { 
    overflow: hidden; 
    max-height: none !important; 
    height: auto !important; 
}