Wie erstelle ich mit Bootstrap 4 eine zweizeilige Navigationsleiste?

Bootstrap 4-Navigationsleiste mit zwei Zeilen

In diesem Bootstrap 4-Tutorial zeigen wir Ihnen, wie Sie eine Navigationsleiste mit zwei Zeilen erstellen. Dies ist ein gängiges Designmuster für Websites, die viele Navigationsoptionen haben oder verschiedene Arten der Navigation trennen möchten.

Voraussetzungen

Um mitzumachen, benötigen Sie:

• Grundkenntnisse von HTML und CSS
• Bootstrap 4 auf Ihrem installiert System

Erstellen der Navigationsleiste

1. Erstellen Sie zunächst eine neue HTML-Datei.
2. Fügen Sie den folgenden Code zu Ihrer Datei hinzu, um die grundlegende Struktur der Navigationsleiste zu erstellen:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
<h3 id="Zwei-Zeilen-hinzufügen">Zwei Zeilen hinzufügen</h3>
<p>Zum Hinzufügen von zwei Zeilen zum navbar verwenden wir die Flex-Column-Klasse für das Navbar-Collapse-Div. Dadurch werden die untergeordneten Elemente des Navbar-Collapse-Divs vertikal gestapelt.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Navigationslinks-hinzufügen">Navigationslinks hinzufügen</h3>
<p>Da wir nun zwei Zeilen haben, können wir ihnen die Navigationslinks hinzufügen. Wir erstellen zwei ul-Elemente, eines für jede Zeile.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Ergebnis">Ergebnis</h3>
<p>Hier ist die resultierende Navigationsleiste mit zwei Zeilen:</p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse flex-column"></div></nav>