Ich benutze Bootstrap 4 und Navigation mit horizontalen Elementen auf meiner Seite. Bei kleinen Geräten klappt dieses Menü aus und Menüpunkte befinden sich immer noch in horizontaler Linie. Was muss ich tun, um es in eine vertikale Position zu ändern, sodass die Elemente für jede Zeile eins sind?Bootstrap 4 responsive Navbar vertikal
Für Bootstrap 4 haben sich die Haltepunkte geändert. Sie sollten die navbar CSS wie dies außer Kraft setzen, wenn Sie es wollen, auf kleinen Bildschirmen vertikal sein:
@media(max-width: 544px) {
.navbar .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar .navbar-nav {
float:none !important;
}
.navbar .collapse.in, .navbar .collapsing {
clear:both;
}
}
Demohttp://codeply.com/go/Ar1H2G4JVH
Hinweis: Die @ media-Abfrage max-width entsprechend für die navbar-toggleable-* eingestellt werden sollte Klasse, die in der Navigationsleiste verwendet wird.
UPDATE: Die zusätzliche CSS ist nicht mehr benötigt ab Bootstrap 4 Alpha 6 da die Navbar vertikal gestapelt: http://www.codeply.com/go/cCZz5CsMcD
Beachten Sie, dass Bootstrap 4 nicht sta ist blue, wie es noch in der Beta ist – Jer
Danke für die Erinnerung daran. Ich verstehe, dass ich es nicht in der Produktion verwenden sollte, aber im Moment benutze ich es nur für ein Studentenprojekt, das nicht (zumindest am Anfang) in der Produktion sein wird und es noch einiges zu tun gibt. – Tim
es wäre hilfreich für andere, wenn Sie Codes (nicht Ihr ganzes Projekt natürlich) Sie selbst oder denken Sie, wo die Fehler im Code sind, wird dies auch Ihnen helfen, Antworten und Anregungen zu erhalten. :) – Jer