Wie kann ich Navigationselemente in Bootstrap 4 zentrieren?

Navigationselemente in Bootstrap zentrieren

In Bootstrap 4 kann die horizontale Ausrichtung der Navigationselemente (Links) mithilfe von Flexbox- und Margin-Dienstprogrammen erreicht werden.

Bootstrap 4 Alpha 6 und Später

Um sowohl Marke als auch Links in Bootstrap 4 Alpha 6 und höher zu zentrieren:

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

In diesem Code werden die Klassen d-md-flex und d-block verwendet zur horizontalen Ausrichtung der Marke und Verlinkung ab mittelgroßen Bildschirmen. Die Flex-Row-Klasse stellt sicher, dass die Elemente nebeneinander angeordnet sind. Die Klassen mx-md-auto und mx-0 zentrieren die Elemente im verfügbaren Raum und passen sie an die Breite des Markenbildes an.

Bootstrap 4.1

Für Bootstrap 4.1:

<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="collapse navbar-collapse">

In diesem Fall wird mx-auto direkt auf das Navbar-Nav angewendet, um das zu zentrieren Nur Links. Die Marke kann mit anderen Techniken wie justify-content-center zentriert werden.

Links genau im Ansichtsfenster positionieren

Um die Links genau im Ansichtsfenster zu zentrieren, berücksichtigen Sie Folgendes Technik:

<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="navbar-nav">

Hier erhält das Navbar-Nav eine feste Breite und justify-content:center, um die Links präzise auszurichten in der Mitte des Bildschirms.

Weitere Anpassungen und zusätzliche Beispiele finden Sie unter den Links im Referenzabschnitt unten.

Das obige ist der detaillierte Inhalt vonWie kann ich Navigationselemente in Bootstrap 4 zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!