So zentrieren Sie die Bootstrap-Navigationsleiste

Als ich heute mit Bootstrap das Nachahmen einer Website geübt habe, stellte ich fest, dass das Menü in der Navigationsleiste der Zielseite zentriert ist, aber Bootstrap scheint keinen zentrierten Stil für das Navigationsmenü zu haben. Das hat lange gedauert Zeit und viele Tests, um endlich eine Lösung zu finden.

Die erste Methode: Fügen Sie die folgenden Stile zu div und ul hinzu: (empfohlenes Lernen: Bootstrap-Video-Tutorial )

<div class="navbar-collapse collapse" style="text-align: center;">
  <ul class="nav navbar-nav" style="display: inline-block;float: none;">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>

Die zweite Methode:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>

Fügen Sie den folgenden Stil hinzu:

.navbar-nav {
  float: none;
  text-align:center;
}
ul.nav.navbar-nav  li {
    float:none;
    display: inline-block;
    margin: 0em;
}

Weitere technische Artikel zum Thema Bootstrap, bitte Besuchen Sie die Spalte Bootstrap-Tutorial, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Bootstrap-Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!