Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste mit vertikal gestapelten Menüs?

Erstellen einer Bootstrap 4-Navigationsleiste mit zwei Zeilen

Die Herausforderung

In Bootstrap 4 stehen Benutzer häufig vor der Herausforderung, eine Navigationsleiste mit einer eindeutigen Struktur zu strukturieren Anordnung: eine markante Marke/ein markantes Symbol auf der linken Seite und zwei vertikal ausgerichtete Navigationsleisten-Navigationsmenüs auf der rechten Seite. Das Ziel besteht darin, ein Layout zu erreichen, bei dem beide Menüs separate Zeilen rechts vom Symbol einnehmen.

Lösung: Verwendung von Flexbox

Um die Menüs vertikal auszurichten, können wir die Flex-Spalten-Flexbox nutzen Utility-Klasse für das Navbar-Collapse-Div. Dadurch wird die Spalte „flex-direction:“ für die untergeordneten Elemente des Div festgelegt und sichergestellt, dass sie vertikal gestapelt werden.

<div>

Zusätzliche Überlegungen

Für eine verbesserte Anpassung und Ausrichtung beachten Sie die folgenden Tipps:

• Symbolgröße anpassen: Wenn das Symbol zu groß oder zu klein ist, passen Sie es mithilfe von „font-size“ an Größe.
• Abstand zwischen Menüs schaffen:Fügen Sie mit „margin-top“ in der zweiten Navigationsleiste etwas vertikalen Abstand zwischen den Menüs hinzu.
• Menüs rechts ausrichten: Verwenden Sie margin-left: auto für die navbar-nav-Klassen, um sie rechts vom auszurichten Symbol.

Mit diesen Anpassungen können Sie nach Wunsch eine Bootstrap 4-Navigationsleiste mit zwei vertikal gestapelten Menüs erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste mit vertikal gestapelten Menüs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!