ブートストラップナビゲーションバーの中心：美しいナビゲーションを作成します

ブートストラップナビゲーションバーを中央に配置する方法は？ユーティリティクラスJustify-Content-Centerを

要素に追加して、すべての要素を水平に中央に配置します。オプション：オフセットクラス（オフセット1など）を追加して、オフセットクラスの値に応じて、ナビゲーションバー、左または右オフセットをオフセットします。

ブートストラップナビゲーションバーが中央にあります

Bootstrapの強力な柔軟性を備えていると、美しい中央ナビゲーションバーを簡単に作成できます。

方法：

1. ユーティリティクラスを追加：

   • <nav></nav>要素にユーティリティクラスjustify-content-centerを追加します。
   • これにより、ナビゲーションバーのすべての要素が水平方向に中心になります。

2. オプション：オフセットクラスを追加：

   • ナビゲーションバーの内容をオフセットする場合は、 offset-1やoffset-md-3など、 <nav></nav>要素にオフセットクラスを追加できます。
   • これにより、オフセットクラスの値に応じて、左または右のナビゲーションバーが相殺されます。

サンプルコード：

 <code class="html"><nav class="navbar navbar-expand-lg justify-content-center"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Disabled</a> </li> </ul> </div> </nav></code>

上記の方法を使用すると、水平に中心のブートストラップナビゲーションバーを簡単に作成できます。

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