Wie kann ich in Bootstrap 4 eine zweizeilige Navigationsleiste erstellen?

Bootstrap 4-Navigationsleiste mit 2 Zeilen

In Bootstrap 4 ist es möglich, mithilfe der Flexbox-Dienstprogrammklassen eine Navigationsleiste mit zwei Zeilen zu erstellen. So können Sie dies erreichen:

1. Fügen Sie die Flex-Column-Klasse zum .navbar-collapse-Div hinzu. Dadurch werden die beiden Navigationsleisten vertikal gestapelt.

2. Legen Sie die Eigenschaft „Flex-Direction: Column“ für das .navbar-brand-Element fest. Dadurch wird das Logo vertikal an den Navigationsleisten-Links ausgerichtet.

3. Optional können Sie die Flex-Row-Klasse zur zweiten Navigationsleiste hinzufügen um die Symbole auszurichten horizontal.

Hier ist eine aktualisierte Version Ihres Codes:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <h1 class="py-2 ml-lg-2 mx-3"></h1>
</div></nav>

Das obige ist der detaillierte Inhalt vonWie kann ich in Bootstrap 4 eine zweizeilige Navigationsleiste erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!