Bootstrap – es ist eines der beliebtesten und am einfachsten zu bedienenden Frameworks für die Entwicklung von Websites. Es bietet Entwicklern eine Vielzahl von vorgefertigten Komponenten, einschließlich eines Navigationsmenüs (navbar). Standardmäßig wird die Navbar in Bootstrap jedoch links ausgerichtet. In diesem Artikel werden wir uns ansehen, wie die Navbar auf einer Seite zentriert wird.
Um die Navbar in der Mitte auszurichten, benötigen wir ein wenig CSS. In Bootstrap wird die Navbar mit der Navbar-Klasse und die Navigationsmenüelemente mit der navbar-nav-Klasse gekennzeichnet. Um eine horizontale Ausrichtung in der Mitte für die Navbar festzulegen, müssen wir benutzerdefinierte Stile hinzufügen, die Bootstrap-Stile überschreiben. Erstellen Sie dazu eine neue Klasse navbar-center und geben Sie die Eigenschaft text-align: center; an. Danach wird die Navbar-Center-Klasse auf das Element mit der navbar-Klasse im HTML-Code angewendet:
Jetzt wird unsere Navbar in der Mitte der Seite ausgerichtet. Wenn Sie die Elemente auch innerhalb der Navbar zentrieren möchten, müssen Sie dazu den Elementen der Liste eine zusätzliche mr-Auto-Klasse hinzufügen. Dadurch werden alle Links und Menüpunkte nach rechts verschoben:
Jetzt wissen Sie, wie Sie die Navbar auf einer Seite in Bootstrap zentrieren. Mit ein wenig CSS und dem Hinzufügen mehrerer Klassen können Sie ein Navigationsmenü mit der gewünschten Ausrichtung erstellen.
Erstellen einer zentrierten Navbar in Bootstrap
Befolgen Sie die folgenden Schritte, um eine zentrierte Navbar in Bootstrap zu erstellen:
-
Fügen Sie die Bootstrap-Bibliothek auf Ihrer Seite hinzu, indem Sie dem Abschnitt Ihres HTML-Dokuments die folgende Codezeile hinzufügen:
