Twitter Bootstrap Navbar Menü scrollen

Question

Bei Verwendung twitter bootstrap 3, auf mobilen Geräten Menü nabber hat horizontale und veritcal Scroller.

Es war nicht dort mit 2.3 und ich konnte nicht herausfinden, wie man es deaktiviert und die Menüpunkte zu voll ohne Scroll-Bars zu erweitern.

Answer 1

Das ist neu 3.

Der beste Weg, um Bootstrap dies zu tun wäre, um die Leitungen 52 zu entfernen oder kommentieren und 53 in /less/navbar.less: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 (Sie optional Linie entfernen 59) und kompiliere bootstrap.less neu.

Wenn Sie nicht Bootstrap neu kompilieren mit einem Tool wie CodeKit oder Grunt, sollten Sie eine Medienabfrage in Ihrem CSS-Dokument schreiben, dass Singles aus und überschreibt die .navbar-Zusammenbruch Klasse vielleicht wie folgt aus:

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

Ich habe diesen Code oben tatsächlich nicht getestet - wie ich neu kompilieren konnte. Sie müssen möglicherweise wichtig oder etwas in der Art enthalten.

Answer 2

Dies sollte es tun (wenn Sie CSS 3.0 Regeln sind bleibende)

max-height: none; 

Answer 3

die vertikale Bildlaufleiste zu entfernen, war dieses Stück CSS. Ich hatte keine horizontalen Bildlaufleisten.

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

Answer 4

Ich lief mir gerade in dieser ...

Nur absolut Position .navbar-default.

Das .navbar-collapse-div ist absolut positioniert und Sie müssen es an ein Eltern-/Vorfahrelement anfügen, das NICHT statisch positioniert ist. Also, ich habe gerade hinzugefügt:

.navbar-default { 
    position: absolute; 
} 

nicht über Bootstrap wissen Sie 4 (die nur hatte es alpha veröffentlicht), aber dies scheint der Trick mit dem Bootstrap 3 nav zu tun. Ich habe ein sehr langes Navi, und jetzt kann ich ordentlich nach unten scrollen und alle Nav-Objekte sehen.

Answer 5

Eine weitere Lösung, in Bootstrap 3.3.4, ist das Hinzufügen der folgenden CSS:

/* No scrolling for collapsed menu */ 

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