ブートストラップ ナビゲーション バーのナビゲーション項目を完全に中央に配置するにはどうすればよいですか?

Bootstrap でナビゲーション項目を中央に配置する

課題

Bootstrap では、ブラウザのウィンドウ サイズに従ってナビゲーション アイテム (リンク) をナビゲーション バーの中央に配置すると、次のことが可能になります。難しい仕事になるでしょう。 mr-auto クラスと ml-auto クラスを使用する標準のブートストラップ アプローチでは、ブラウザ ウィンドウの幅からロゴの幅を引いた値に基づいてナビゲーションを効果的に中央に配置します。完璧なセンタリングを達成するには、より正確なソリューションが必要です。

ソリューション

フレックスボックスとマージン ユーティリティを応答的に使用する

Bootstrap 4 は、d- flex クラスと mx-auto クラスにより、応答性の高いセンタリングを実現できます。その方法は次のとおりです:

<div class="d-md-flex d-block flex-row mx-md-auto mx-0">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse mr-auto">

このコード内:

• .d-md-flex クラスは、中規模の画面 (およびそれ以上) でナビゲーション コンテナーを柔軟にします。ディスプレイを flex に設定します。
• .d-block クラスは小さい画面をターゲットにし、ナビゲーション コンテナーをblock.
• .flex-row クラスは、ナビゲーション コンテナの子要素を水平方向に配置します。
• .mx-md-auto クラスは、中型以上の画面でナビゲーション コンテナを水平方向の中央に配置します。
• .mx-0 クラスは、小さい画面では水平方向の余白を削除して、適切な配置を確保します。
• .mr-auto クラスは、折りたたまれたナビゲーション項目を右揃えにします。

このアプローチでは、ブラウザ ウィンドウのサイズに従ってナビゲーション項目が応答的に中央に配置され、完璧な位置合わせが保証されます。

追加メモ

• Bootstrap 4.1 以降では、.navbar-nav 要素で .mx-auto を直接使用できます。同じ効果を実現するには、
• ナビゲーション項目をビューポートの中央に正確に配置したい場合は、CSS グリッド アプローチの使用を検討してください。

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