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.

Sie haben bereits Ihre Frage beantwortet. Verwenden .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

  1. 10

    Bootstrap-4 stabile:

    In der stabilen version navbar-toggleable-* umbenannt wurde, um navbar-expand-*, aber die -xs infix ist (noch) entfernt, also in Ihrem Fall sollten Sie navbar-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

    weil -xs existiert nicht mehr bei allen im grid-system!

    InformationsquelleAutor ourmandave

Schreibe einen Kommentar