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
5
A
Antwort
0
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.
- navbar-togglebar-xs - 544px
- navbar-togglebar-sm - 767px
- navbar-togglebar-md - 991px
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
Verwandte Themen
- 1. bootstrap responsive navbar
- 2. Bootstrap 4 Navbar, mit Dropdown-Menüs und Responsive Template?
- 3. bootstrap 4 kollabiert navbar verliert navbar-brand
- 4. Responsive „Medien“ in Bootstrap 4
- 5. Bootstrap 4 - Responsive Karten in Kartenspalten
- 6. Bootstrap .Table-responsive deaktivieren Scrollbar vertikal
- 7. Bootstrap 4 Änderung navbar Höhe navbar Elemente verursacht nicht vertikal zu
- 8. Zentrieren Bootstrap Navbar horizontal und vertikal
- 9. Navbar responsive Menü
- 10. responsive navbar in JS
- 11. Responsive Markenbild auf Navbar
- 12. Responsive Bild Bootstrap
- 13. Nein img-responsive in Bootstrap 4
- 14. Bootstrap 4 - Spaltengitter funktioniert nicht Responsive
- 15. Bootstrap 4 Navbar Menüs von Borders Geschlossenen
- 16. Bootstrap Full Responsive Navbar mit Mini-Logos für jeden Menüpunkt
- 17. Bootstrap Responsive Nav Bar
- 18. Navbar Menüelemente vertikal zentriert
- 19. Bootstrap kollabiert Navbar Menü vertikal nach dem zentrierten Elemente
- 20. Bootstrap Navbar vertikal zu horizontal oder umgekehrt. Ereignisauslösung
- 21. Responsive Navbar-Toggle-Taste funktioniert nicht.
- 22. Bootstrap Responsive Mehrzeiliges Text-Overlay
- 23. Bootstrap-Fülltisch vertikal
- 24. Bootstrap Responsive Button Gruppe gerechtfertigt
- 25. Bootstrap responsive height Ausgabe
- 26. Machen Sie Logo Bild responsive mit Bootstrap
- 27. Bootstrap Drowdown für Navbar
- 28. Bootstrap Navbar - Menüpunkte Grenzfrage
- 29. Bootstrap Transparent Navbar funktioniert nicht
- 30. Bootstrap responsive Container Breite funktioniert nicht
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