Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Elemente in einer Bootstrap-Navigationsleiste zentrieren?

Wie kann ich Elemente in einer Bootstrap-Navigationsleiste zentrieren?

Linda Hamilton
Freigeben: 2024-12-30 07:39:12
Original
196 Leute haben es durchsucht

How Can I Center Elements in a Bootstrap Navbar?

Elemente in der Bootstrap-Navigationsleiste zentrieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
.navbar-center-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

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