Wie zentriere ich Navbar-Inhalte in Bootstrap 3 mithilfe von CSS?

CSS zum Zentrieren von Navbar-Inhalten

Haben Sie Schwierigkeiten, Inhalte in der Bootstrap-Navigationsleiste zu zentrieren? Gib nicht auf! Lassen Sie uns den Fehler mithilfe eines bereitgestellten HTML- und CSS-Codeausschnitts beheben.

Problem:

Verwendung von Bootstrap 3, aber vorhandene Methoden richten den Inhalt nicht zentral in der Navigationsleiste aus.

HTML-Code:

Zur Verfügung gestellt Referenz (aber hier nicht enthalten).

Überarbeitetes CSS:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Erklärung:

• Entfernt float: links von .navbar .navbar-nav, um die innere Navigation zu zentrieren.
• Setzen Anzeige: Inline-Block, um die horizontale Ausrichtung beizubehalten.
• Angepasste vertikale Ausrichtung: oben für korrekte Ausrichtung.
• Enthalten .navbar .navbar-collapse, um den inneren Inhalt von minimierten Navigationsleisten auszurichten.

Verbessert Snippet:

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!-- ... -->
    </ul>
  </div>

  <!-- ... -->
</div>

Responsive Anpassungen:

Um den Zentrierungseffekt auf nicht ausgeblendete Navigationsleisten zu beschränken, fügen Sie diese Medienabfrage hinzu:

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

Jetzt wird der Inhalt Ihrer Navigationsleiste sowohl im minimierten als auch im nicht minimierten Zustand mühelos zentriert Staaten.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Navbar-Inhalte in Bootstrap 3 mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!