ホームページ > 記事 > ウェブフロントエンド > Bootstrap 4 Navbar 項目を折りたたみセクションの外側に配置するにはどうすればよいですか?
Bootstrap 4: 折りたたみセクションの外側にナビゲーションバー項目を配置する
Bootstrap 4 のナビゲーションバーのナビゲーションは、特に特定の要素を維持する場合に難しい場合があります。折りたたみ部分の外側。多くの開発者は、折りたたみ状態に関係なく特定の項目を永続的に維持することに苦労しています。
これに対処する最も簡単なアプローチは、フレックスボックス ユーティリティ クラスを利用することです。これにより、追加の 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>
この改良版では
これらのクラスを効果的に利用すると、ブレークポイントに到達したときに折りたたみ可能なセクションが優先される一方で、折りたたみの外側の項目が表示されたままになります。
以上がBootstrap 4 Navbar 項目を折りたたみセクションの外側に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。