Wie zentriere ich Navigationselemente in einer Bootstrap-Navigationsleiste perfekt?

Navigationselemente in Bootstrap zentrieren

Die Herausforderung

In Bootstrap kann das Zentrieren von Navigationselementen (Links) in der Navigationsleiste entsprechend der Browserfenstergröße erfolgen eine knifflige Aufgabe sein. Der standardmäßige Bootstrap-Ansatz, der die Klassen mr-auto und ml-auto verwendet, zentriert die Navigation effektiv basierend auf der Breite des Browserfensters abzüglich der Logobreite. Um eine perfekte Zentrierung zu erreichen, benötigen wir eine präzisere Lösung.

Die Lösung

Flexbox und Margin Utilities reaktionsschnell nutzen

Bootstrap 4 bietet die d- Flex- und MX-Auto-Klassen, die es uns ermöglichen, eine reaktionsfähige Zentrierung zu erreichen. So geht's:

<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

In diesem Code:

• Die Klasse .d-md-flex macht den Navigationscontainer in mittelgroßen Bildschirmen (und größeren) flexibel und setzt seine Anzeige auf Flex.
• Die .d-block-Klasse zielt auf kleinere Bildschirme ab und macht den Navigationscontainer zu einem blockieren.
• Die .flex-row-Klasse ordnet die untergeordneten Elemente des Navigationscontainers horizontal an.
• Die .mx-md-auto-Klasse zentriert den Navigationscontainer horizontal in mittelgroßen und größeren Bildschirmen.
• Die .mx-0-Klasse entfernt die horizontalen Ränder in kleineren Bildschirmen, um eine ordnungsgemäße Ausrichtung sicherzustellen.
• Die Die .mr-auto-Klasse richtet die reduzierten Navigationselemente rechts aus.

Dieser Ansatz zentriert die Navigationselemente entsprechend der Browserfenstergröße und gewährleistet so eine perfekte Ausrichtung.

Zusätzliche Hinweise

• Für Bootstrap 4.1 und höher können Sie .mx-auto direkt auf dem .navbar-nav-Element verwenden, um erzielen Sie den gleichen Effekt.
• Wenn Sie möchten, dass die Navigationselemente genau im Ansichtsfenster zentriert sind, sollten Sie die Verwendung eines CSS-Rasteransatzes in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Navigationselemente in einer Bootstrap-Navigationsleiste perfekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!