ブートストラップ ナビゲーション バーを中央に配置する方法

今日、Bootstrap を使用して Web サイトを模倣する練習をしたところ、対象の Web サイトのナビゲーション バーのメニューが中央に配置されていることがわかりました。しかし、Bootstrap にはナビゲーション メニューの中央に配置されたスタイルがないようです。長い時間と多くのテストを経て、最終的に解決策が見つかりました。

最初の方法: 次のスタイルを div と ul に追加します: (推奨学習: Bootstrap ビデオ チュートリアル )

<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>

2 番目の方法:

<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>

次のスタイルを追加します:

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

その他のブートストラップ関連の技術記事を参照してください。 Bootstrap チュートリアル 列を読んで学習してください。

以上がブートストラップ ナビゲーション バーを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。