Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste?

Wie erstelle ich eine zweireihige Bootstrap 4-Navigationsleiste?

Susan Sarandon
Freigeben: 2024-12-14 02:27:14
Original
170 Leute haben es durchsucht

How to Create a Two-Row Bootstrap 4 Navbar?

Erstellen einer Bootstrap 4-Navigationsleiste mit zwei Zeilen

Das Einrichten einer Bootstrap 4-Navigationsleiste mit zwei Zeilen ist unkompliziert und ermöglicht vielseitige Anordnungen auf Ihrem Webseite. Um dies zu erreichen, verwenden Sie die Flexbox-Dienstprogrammklasse „Flex-Column“ im Navbar-Collapse-Div und stellen Sie sicher, dass die untergeordneten Elemente vertikal ausgerichtet sind.

  1. Fügen Sie die Flex-Column-Klasse hinzu:

    Umschließen Sie das Navbar-Collapse-Div mit der Flex-Column-Klasse, um eine Vertikale zu erreichen Ausrichtung.

    <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">
    Nach dem Login kopieren
  2. Optionale Ausrichtung und Polsterung:

    Falls gewünscht, fügen Sie zusätzliche Ausrichtung und Polsterung hinzu, um das visuelle Erscheinungsbild zu verbessern. Um beispielsweise den Text rechts auszurichten und den Social-Media-Symbolen etwas vertikalen Abstand hinzuzufügen:

    <ul class="navbar-nav flex-row mb-2">
        <li class="nav-item">
            <a class="nav-link py-1 pr-3" href="#">
                <i class="fa fa-facebook"></i>
            </a>
        </li>
        ...
    </ul>
    Nach dem Login kopieren
  3. Zusätzliche Variationen:

    Experimentieren Sie mit alternativen Layouts, etwa einer Navigationsleiste mit zwei Zeilen auf der rechten Seite oder einer rechtsbündigen Suche Formular.

Demo und Code:

Hier ist eine Demo und der entsprechende Code für eine Navigationsleiste mit zwei Zeilen:

  • [Demo](https://jsfiddle.net/lot99)
  • [Code](https:// codepen.io/anon/pen/VEPqpe?editors=1010)

Hinweis:

In Stellen Sie bei Bootstrap 4.0.0 und höher sicher, dass Sie aus Kompatibilitätsgründen den aktualisierten Code gemäß den bereitgestellten Links verwenden.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage