Wie zentriere ich ein Element innerhalb einer Bootstrap-Navigationsleiste?

Elemente in der Bootstrap-Navigationsleiste zentrieren

Problem: Trotz verschiedener Versuche gelingt es dem Benutzer nicht, ein Element innerhalb eines Bootstrap zu zentrieren navbar.

Antwort:

Bootstrap 5 (2021)

Die Navbar nutzt Flexbox, sodass Sie Elemente mithilfe der mx-auto-Klasse zentrieren können.

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

Bootstrap 4.1

Für Bootstrap 4.1 und höher, verwenden Sie mx-auto anstelle von pull-left und pull-right, um die linken und rechten Menüs auszurichten:

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

Andere Zentrierungsoptionen

• Position: absolute;: Stellen Sie das zu zentrierende Element auf position: absolute; und verwenden Sie transform: translatorX(-50%);.
• Flexbox-Verschachtelung: Sorgen Sie dafür, dass das zentrierte Element auch Folgendes anzeigt: Flexbox und Justify-Content: Center.

Denken Sie daran, dass diese Lösungen möglicherweise Nachteile haben, z. B. dass das zentrierte Element nicht perfekt an benachbarten Elementen unterschiedlicher Größe ausgerichtet ist Breiten.

Zusätzliche Hinweise:

• Ersetzen Sie main-nav unbedingt durch den Namen Ihrer gewünschten Navbar-Klasse.
• Wenn Ihre Navbar dies hat Wenn Sie ein einzelnes Navbar-Nav verwenden, verwenden Sie justify-content-center, um es zu zentrieren.
• Um Elemente auf dem Desktop zu zentrieren, sie aber auszurichten Links auf Mobilgeräten, Medienabfragen verwenden.
• Weitere Informationen zur Navbar-Anpassung finden Sie in der [Bootstrap-Dokumentation](https://getbootstrap.com/docs/4.5/components/navbar/).

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