Haben Sie Schwierigkeiten, ein Element in der Bootstrap-Navigationsleiste zu zentrieren? Trotz verschiedener Versuche könnte sich die Bewältigung dieser scheinbar einfachen Aufgabe als schwierig erweisen. Dieser Artikel befasst sich mit dem Problem und bietet praktische Lösungen.
Grundlegendes zur Navigationsleistenzentrierung
In Bootstrap-Versionen vor 4.1 basierte die Zentrierung von Elementen innerhalb der Navigationsleiste auf Gleitkommazahlen und Rändern , deren effektive Umsetzung schwierig sein könnte. Mit der Einführung von Flexbox sind die Dinge jedoch einfacher geworden.
Lösung für Bootstrap 4.1 und höher
Bootstrap 4.1 führte die Eigenschaft justify-content-center ein, die Folgendes bietet eine einfache und effektive Möglichkeit, Elemente in der Navigationsleiste zu zentrieren:
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav"> <div class="container"> <ul class="nav navbar-nav"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Download</a></li> <li class="nav-item"><a class="nav-link" href="#">Register</a></li> </ul> <ul class="nav navbar-nav justify-content-center"> <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Rates</a></li> <li class="nav-item"><a class="nav-link" href="#">Help</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </nav>
Absolut Positionierungsalternative
Wenn eine absolute Positionierung akzeptabel ist, kann sie auch zum Zentrieren von Elementen innerhalb der Navigationsleiste verwendet werden:
<div class="navbar-center-absolute"> <!-- Centered element here --> </div>
.navbar-center-absolute { position: absolute; left: 50%; transform: translateX(-50%); }
Flexbox-Nesting-Alternative
Schließlich besteht ein weiterer Flexbox-basierter Ansatz darin, ein zentriertes Element darin zu verschachteln Navigationsleiste:
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav"> <div class="container"> <ul class="nav navbar-nav flex-fill w-100 d-flex flex-nowrap"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Download</a></li> <li class="nav-item"><a class="nav-link" href="#">Register</a></li> </ul> <ul class="nav navbar-nav flex-fill justify-content-center"> <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li> </ul> <ul class="nav navbar-nav flex-fill w-100 justify-content-end"> <li class="nav-item"><a class="nav-link" href="#">Rates</a></li> <li class="nav-item"><a class="nav-link" href="#">Help</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </nav>
Diese Lösungen bieten effektive Möglichkeiten, Elemente in der Bootstrap-Navigationsleiste zu zentrieren, wodurch die Navigation Ihrer Website benutzerfreundlicher und optisch ansprechender wird.
Das obige ist der detaillierte Inhalt vonWie kann ich Elemente in einer Bootstrap-Navigationsleiste zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!