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

Bootstrap でナビゲーション項目を中央に配置する: 総合ガイド

Web ページをナビゲートするには、ナビゲーション要素に簡単かつ直感的にアクセスする必要があります。ナビゲーション項目を適切に配置することは、ユーザー エクスペリエンスと視覚的な魅力にとって非常に重要です。人気のフロントエンド フレームワークである Bootstrap は、ナビゲーション項目を中央に配置するためのソリューションを提供します。

問題:

Bootstrap 4 を使用するときに発生する一般的な問題は、ナビゲーションの位置合わせです。ナビゲーションバー内の項目 (「nav-items」)。デフォルトでは、これらの項目は左揃えです。ユーザーは、代わりにそれらを中央に配置したい場合があります。ナビゲーションバーの機能と応答性を損なうことなく配置を調整することは、特定の解決策を必要とする課題です。

解決策:

Bootstrap 4 には、ナビゲーション項目を配置するためのいくつかのオプションが用意されています。これには、mr-auto および ml-auto ユーティリティ クラスが含まれます。これらのクラスはある程度のセンタリングを提供しますが、特定のシナリオでは正確な位置合わせが行われない場合があります。正確にセンタリングするには、フレックスボックスとマージン ユーティリティの組み合わせをお勧めします。

Bootstrap 4 Alpha 6:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <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">

Bootstrap 4.1:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse">

これらのコード例は、ナビゲーション項目を中央に配置します応答性を維持しながら、ナビゲーションバー内で水平方向に移動できます。 mx-auto ユーティリティ クラスは、要素が利用可能な幅内で均等に配置されるようにマージンを自動的に調整します。

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