Heim >Web-Frontend >Bootstrap-Tutorial >So zentrieren Sie die Bootstrap-Navigationsleiste

So zentrieren Sie die Bootstrap-Navigationsleiste

(*-*)浩
(*-*)浩Original
2019-07-17 09:43:186557Durchsuche

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.

So zentrieren Sie die Bootstrap-Navigationsleiste

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn