Wie zentriert man Inhalte perfekt in einer responsiven Bootstrap-Navigationsleiste?

So zentrieren Sie Inhalte in einer Responsive Bootstrap-Navigationsleiste

Das Zentrieren von Inhalten in einer Bootstrap-Navigationsleiste kann eine frustrierende Aufgabe sein, insbesondere wenn die häufig empfohlenen Maßnahmen ergriffen werden Lösungen scheitern. Dieser Artikel bietet eine einfache und effektive Methode zur Behebung dieses Problems.

Die HTML-Struktur Ihrer Navigationsleiste erscheint standardmäßig. Allerdings ist das CSS-Styling etwas abweichend. Bootstrap richtet den Inhalt der Navigationsleiste standardmäßig links aus. Um es zu zentrieren, befolgen Sie diese Schritte:

1. Entfernen Sie den Float: left aus .navbar .navbar-nav: Diese Änderung entfernt die Linksausrichtung aus der inneren Navigation.
2. Setzen Sie .navbar .navbar-nav so ein, dass Folgendes angezeigt wird: inline-block: Dies wandelt die Navigationslinks in Inline-Elemente um.
3. Zentrieren Sie den Text in .navbar .navbar-collapse: Dieser Schritt zentriert den Inhalt, wenn die Navigation ausgeblendet wird.

Hier ist das aktualisierte CSS:

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

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

Diese Lösung sollte den Inhalt in allen Bildschirmgrößen zentrieren. Wenn Sie diesen Effekt jedoch nur wünschen, wenn die Navigationsleiste nicht ausgeblendet ist, können Sie eine Medienabfrage verwenden:

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

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

Dadurch wird der Zentrierungseffekt nur angewendet, wenn die Bildschirmbreite größer oder gleich 768 Pixel ist. Passen Sie den Haltepunkt nach Bedarf für Ihr Design an.

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