Wie zentriere ich Inhalte in einer responsiven Bootstrap-Navigationsleiste?

So zentrieren Sie Inhalte in einer responsiven Bootstrap-Navigationsleiste

Sie haben Schwierigkeiten, den Inhalt in Ihrer Bootstrap-Navigationsleiste auszurichten? Hier ist eine umfassende Lösung, die bei vielen Benutzern zuverlässig funktioniert hat.

Verstehen des Problems

Die Standardausrichtung der Navigationsleiste von Bootstrap kann problematisch sein, insbesondere wenn es um responsive Layouts geht. Der Übeltäter ist oft die Eigenschaft „float: left“, die mit der inneren Navigation verknüpft ist.

Die Lösung

Um den Inhalt zu zentrieren, müssen Sie die Eigenschaft „float: left“ aus dem entfernen innere Navigation und machen Sie daraus einen Inline-Block. Darüber hinaus wird der Inhalt horizontal ausgerichtet, wenn Sie die text-align-Eigenschaft auf „center“ setzen.

CSS-Änderungen

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

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

Beispiel

Durch die Implementierung dieser CSS-Änderungen wird der Inhalt in Ihrem zentriert navbar.

<!-- ...navbar code here -->

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

  .navbar .navbar-collapse {
    text-align: center;
  }
</style>

<!-- ...navbar code here -->

Zusätzliche Überlegungen

Um sicherzustellen, dass die Ausrichtungsänderungen nur für nicht ausgeblendete Navigationsleisten auftreten, sollten Sie erwägen, die CSS-Änderungen in eine entsprechende Medienabfrage einzuschließen.

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

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

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