Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich Navigationslinks in einer Bootstrap 4-Navigationsleiste präzise?

Wie zentriere ich Navigationslinks in einer Bootstrap 4-Navigationsleiste präzise?

Barbara Streisand
Freigeben: 2024-11-21 12:06:10
Original
669 Leute haben es durchsucht

How to Precisely Center Navigation Links in a Bootstrap 4 Navbar?

Navigationselemente in Bootstrap zentrieren

Die Aufgabe, Navigationslinks innerhalb einer Bootstrap 4-Navigationsleiste im Verhältnis zur Größe des Browserfensters zu zentrieren, hat erwies sich als häufige Herausforderung. Während eine einfache Lösung mit ml-auto und mr-auto dem nahe kommen mag, erreicht sie keine präzise Zentrierung.

Um dieses Problem zu beheben, bieten wir einen umfassenden Ansatz, der Flexbox- und Margin-Dienstprogramme reaktionsschnell nutzt.

Bootstrap 4 Alpha 6 und höher

In Bootstrap-Versionen 4 Alpha 6 und höher ist die Der folgende Code bietet sowohl Marken- als auch Linkzentrierung:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <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">
Nach dem Login kopieren

Bootstrap 4.1

Ab Bootstrap 4.1 bleibt die Zentrierungsstrategie dieselbe. Hier ist ein Beispiel, das Links ausrichtet und die Marke auf Mobilgeräten links positioniert:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">
Nach dem Login kopieren
Nach dem Login kopieren

Präzise Linkzentrierung im Ansichtsfenster

Wenn Sie eine genaue Linkzentrierung innerhalb des benötigen viewport, versuchen Sie diesen Ansatz:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">
Nach dem Login kopieren
Nach dem Login kopieren

Weitere Beispiele für die Ausrichtung der Navigationsleiste in Bootstrap finden Sie unter den bereitgestellten Links 4.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Navigationslinks in einer Bootstrap 4-Navigationsleiste präzise?. 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