Wie zentriere ich Elemente in einer Bootstrap-Navigationsleiste?

Elemente in der Bootstrap-Navigationsleiste zentrieren

Der Versuch, Elemente in einer Bootstrap-Navigationsleiste zu zentrieren, kann schwierig erscheinen. Mit den richtigen Techniken ist dies jedoch erreichbar.

Bootstrap 4 und höher

Bootstrap 4 und spätere Versionen nutzen Flexbox, was Ausrichtungsprozesse vereinfacht. Um ein Element wie „Website-Name“ zu zentrieren, fügen Sie die Klasse „mx-auto“ zu „nav.navbar-nav“ hinzu, die es enthält. Dadurch wird es relativ zu den linken und rechten „nav.navbar-nav“-Elementen zentriert.

Zum Beispiel:

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

Vorherige Bootstrap-Versionen

Für Bootstrap-Versionen vor 4 ist eine Zentrierung mithilfe von Flexbox-Verschachtelung oder Position erforderlich: absolut Techniken.

Zusätzliche Optionen

Wenn die Navbar nur ein einziges „nav.navbar-nav“ enthält, können Sie „justify-content-center“ verwenden, um es zu zentrieren Inhalt.

Absolute Zentrierung

Um absolute Zentrierung zu erreichen, müssen Sie kann entweder die Position: absolute Methode oder die Flexbox-Verschachtelung verwenden.

Absolute Position

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Flexbox-Verschachtelung

Verschachtelung das zentrierte Element in einem anderen Flexbox-Container mit „justify-content-center“ und „flex-fill“ angewendet.

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

Das obige ist der detaillierte Inhalt vonWie zentriere ich Elemente in einer Bootstrap-Navigationsleiste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!