Bootstrap 3 Navbar のコンテンツを中央に配置するにはどうすればよいですか?

レスポンシブ ブートストラップ ナビゲーション バーでコンテンツをセンタリングする

質問:

オンラインで多数のソリューションを検討しているにもかかわらず、 Bootstrap 3 ナビゲーションバーでコンテンツを中央に配置するのに問題があります。コードの互換性を維持しながらコンテンツを適切に配置する CSS またはメソッドについて支援していただけますか?

サンプルコード:

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

答え:

メソッド:

コンテンツを中央に配置するには、CSS を変更します.navbar .navbar-nav および .navbar .navbar-collapse のクラスは次のようになります:

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

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

説明:

これらの変更により、次のことが可能になります。

• からデフォルトの float: left プロパティを削除します。 .navbar .navbar-nav、項目を整列させることができます
• 表示を設定: inline-block;適切な間隔を維持しながら、ナビゲーション項目をインライン要素にします。
• text-align: center; を使用して、ナビゲーションバー内のテキストを中央揃えにします。 on .navbar .navbar-collapse.

追加メモ:

• 大きな画面でのみこの中央揃え効果が必要な場合は、CSS を次のように囲みます。適切な画面サイズをターゲットとするメディア クエリ。
• CSS を試して正確なサイズを微調整してください。コンテンツの配置。

以上がBootstrap 3 Navbar のコンテンツを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。