Bootstrap-4 responsive navbar, dass die Einstürze in xs Breite?
Ich versuche zu finden, ein Beispiel für die bootstrap-4 responsive navbar, zieht sich zusammen, um ein hamburger-button nur bei der xs-der Breite, sondern ist vollständig sichtbar, wenn Sie breiter.
Es ist ein bootstrap 3 Beispiel, das einfach Nur Funktioniert, aber nichts für die 4, die ich gefunden habe.
Bootstrap-4 navbar Beispiele Seite zeigt eine zusammengebrochen Inhalt - version, aber es brach bei allen breiten.
Und unten angedeutet, wie es funktioniert mit .navbar-toggler, et. al.
Für komplexere Navigations-Muster, wie in den Bootstrap v3, verwenden Sie die .navbar-toggleable -* - Klassen in Verbindung mit der .navbar-toggler. Diese Klassen überschreiben unsere responsive utilities zu zeigen, nur die navigation wenn der Inhalt gedacht ist, gezeigt zu werden.
Habe ich minimal bootstrap-Kenntnisse, so dass jede Lösung, die ich nicht kämpfen wollen, den Rahmen, wenn es bereits sanktionierte Weg, dies zu tun.
Edit:
Eigentlich Responsive Navbar Beispiel unter dem Zusammenklappbar Inhalte in der bootstrap-4-Dokumentation macht genau das, was ich suchte, war mit der navbar-toggleable-xs Klasse. Ich sah es nicht früher, weil ich nicht das Fenster schmal genug ist.
.navbar-toggleable-xs
So viele Klassen zu lernen. Danke!
bitte fügen Sie Ihren Bearbeiten als Antwort und es akzeptieren, so dass diese Frage geschlossen werden kann
InformationsquelleAutor ourmandave | 2015-10-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bootstrap-4 stabile:
In der stabilen version
navbar-toggleable-*
umbenannt wurde, umnavbar-expand-*
, aber die-xs
infix ist (noch) entfernt, also in Ihrem Fall sollten Sienavbar-expand
.Erklärung in den docs: https://getbootstrap.com/docs/4.1/components/navbar/#how-it-works
Nur für Bootstrap-4 alpha:
Eigentlich Responsive Navbar Beispiel unter dem Zusammenklappbar Inhalte in der Bootstrap-4-Dokumentation macht genau das, was ich suchte, war mit der
navbar-toggleable-xs
Klasse. Ich sah es nicht früher, weil ich nicht das Fenster schmal genug ist.In der Bootstrap-4 alpha 6, ist es nun einfach
navbar-toggleable
ohne die-xs
.BEARBEITEN: Der link zur Dokumentation ist jetzt hier: http://v4-alpha.getbootstrap.com/components/navbar/#nav
InformationsquelleAutor ourmandave