Wie kann ich Elemente innerhalb einer Bootstrap-Navigationsleiste zentrieren?

Elemente in der Bootstrap-Navbar zentrieren

Das Zentrieren von Elementen in der Bootstrap-Navbar kann aufgrund der flexiblen Anordnung der Komponenten eine Herausforderung darstellen. Hier sind jedoch einige effektive Möglichkeiten, dies zu erreichen:

Bootstrap 5 (2021)

Die Navbar verwendet weiterhin Flexbox, sodass die Ausrichtungsprinzipien ähnlich wie bei Bootstrap 4 bleiben „Website-Name“ kann mit mx-auto zentriert werden. Die Menüs auf der linken und rechten Seite müssen nicht mehr schwebend sein.

Beispielcode:

<nav>

Bootstrap 4.1

Die Navbar nutzt jetzt Flexbox und ermöglicht die Zentrierung mit mx-auto. Für die Menüs auf der linken und rechten Seite ist die Verwendung von Floats nicht mehr erforderlich.

Beispielcode:

<nav>

Bootstrap 4 Beta

Wenn die Navbar nur über ein einziges Navbar-Nav verfügt, können Sie auch verwenden justify-content-center, um den Inhalt auszurichten.

Navigationsleistenzentrierung mit absoluter Position

Sie können das Element, das Sie zentrieren möchten, absolut positionieren :

.abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); }

Navbar-Zentrierung mit Flexbox Verschachtelung

Eine weitere Möglichkeit besteht darin, das Element mithilfe von Flexbox zu zentrieren:

<ul>

Hinweis: Die oben genannten Lösungen zentrieren den „Website-Namen“ relativ zur linken Seite und rechts Navbar-Nav. Durch das Hinzufügen der Klasse flex-fill wird sichergestellt, dass jeder Abschnitt die Breite der Navigationsleiste ausfüllt, wodurch eine Fehlausrichtung verhindert wird, wenn die angrenzenden Abschnitte in der Breite variieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente innerhalb einer Bootstrap-Navigationsleiste zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!