Bootstrap 4 の Navbar 項目を折りたたまれたコンテナの外側に表示し続けるにはどうすればよいですか?

ブートストラップ 4: 折りたたまれたコンテナーの外側にナビゲーションバー項目を表示する

ブートストラップを使用する場合、共通の課題は、折りたたまれたコンテナーの外側に特定のナビゲーションバー項目を永続的に表示することです。デフォルトでは、小さい画面でナビゲーションバーが折りたたまれると、すべてのナビゲーションバー項目が非表示になります。この問題に対する簡単な解決策を見てみましょう。

折りたたみ状態に関係なくナビゲーションバー項目を表示し続ける最も簡単な方法は、Bootstrap が提供するフレックスボックス ユーティリティ クラスを利用することです。このアプローチにより、追加の CSS が必要なくなります。

コード ソリューション

次のコードでは、折りたたまれた状態でも表示されたままにする必要がある項目は、.navbar-collapse div の外側に保持されます。

<code class="html"><nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav></code>

説明

上記のコード:

• .d-flex .flex-row クラスは、ナビゲーションバー項目が水平方向に連続して表示されるようにします。 .
• .order-2 .order-lg-3 クラスは、小さい画面 (order-2) では項目を右端に配置し、画面サイズが大きくなると項目を左に移動します (order-lg-) 3).
• .order-3 .order-lg-2 クラスは、小さい画面 (order-3) では折りたたみボタンとメニュー項目を左側に配置し、画面サイズが大きくなると右側に配置します (order -lg-2).

フレックスボックス ユーティリティ クラスを使用すると、ナビゲーション バーのレイアウトをエレガントに制御でき、ナビゲーション バーが折りたたまれている場合でも特定の項目が表示されたままになります。

以上がBootstrap 4 の Navbar 項目を折りたたまれたコンテナの外側に表示し続けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。