Wie zentriere ich Inhalte in einer Bootstrap 3-Navigationsleiste?

Inhalte in der Responsive Bootstrap-Navigationsleiste zentrieren

Frage:

Obwohl wir zahlreiche Lösungen online erkundet haben, Sie haben Probleme beim Zentrieren von Inhalten in Ihrer Bootstrap 3-Navigationsleiste. Können Sie mit CSS oder Methoden helfen, die den Inhalt entsprechend ausrichten und gleichzeitig die Codekompatibilität wahren?

Beispielcode:

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

Antwort:

Methode:

Um den Inhalt zu zentrieren, ändern Sie das CSS der Klassen .navbar .navbar-nav und .navbar .navbar-collapse wie folgt:

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

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

Erklärung:

Diese Änderungen ermöglichen Ihnen Folgendes:

• Entfernen Sie die Standardeigenschaft float: left aus .navbar .navbar-nav, damit die Elemente nebeneinander ausgerichtet werden können.
• Anzeige festlegen: inline-block; um die Navigationselemente inline-Elemente zu machen und dabei den richtigen Abstand beizubehalten.
• Zentrieren Sie den Text innerhalb der Navigationsleiste mit text-align: center; auf .navbar .navbar-collapse.

Zusätzliche Hinweise:

• Wenn Sie diesen Zentrierungseffekt nur auf größeren Bildschirmen wünschen, umgeben Sie das CSS eine Medienabfrage, die auf die entsprechende Bildschirmgröße abzielt.
• Spielen Sie mit dem CSS herum, um die genaue Platzierung des zu optimieren Inhalt.

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