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

CSS をナビゲーションバーのコンテンツの中央に配置

Bootstrap のナビゲーションバー内のコンテンツを中央に配置するのに苦労していますか?あきらめないで！提供された HTML および CSS コード スニペットを使用してトラブルシューティングを行ってみましょう。

問題:

Bootstrap 3 を使用していますが、既存のメソッドではコンテンツがナビゲーションバー内の中央に配置されません。

HTMLコード:

参照用に提供されています (ただし、ここには含まれていません)。

改訂された CSS:

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

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

説明:

• 削除されたフロート: .navbar .navbar-nav から左に移動して、内部ナビゲーションを中央に配置します。
• 水平方向の配置を維持するために、display: inline-block を設定します。
• 適切な配置のために垂直方向の配置: 上部を調整しました。
• 折りたたまれたコンテンツの内部を整列させるための .navbar .navbar-collapse が含まれていますnavbars.

改善されたスニペット:

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

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

  <!-- ... -->
</div>

レスポンシブ調整:

センタリング効果を制限するには折りたたまれていないナビゲーションバー、このメディアを追加しますquery:

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

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

これで、ナビゲーションバーのコンテンツが、折りたたまれた状態と折りたたまれていない状態の両方で簡単に中央に配置されるようになります。

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