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

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">

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">

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">

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!