Rumah > Artikel > hujung hadapan web > Bagaimana untuk Meletakkan Bootstrap 4 Item Navbar di Luar Bahagian Runtuh?
Bootstrap 4: Meletakkan Item Navbar di Luar Bahagian Runtuh
Menavigasi bar navigasi Bootstrap 4 boleh menjadi rumit, terutamanya apabila ia berkaitan dengan mengekalkan elemen tertentu di luar bahagian yang boleh dilipat. Ramai pembangun bergelut untuk memastikan item tertentu kekal berterusan tanpa mengira keadaan runtuh.
Untuk menangani perkara ini, pendekatan paling mudah ialah menggunakan kelas utiliti flexbox. Ini menghapuskan keperluan untuk CSS tambahan dan menyimpan item yang dikehendaki dengan bersih di luar div navbar-collapse.
Di bawah ialah versi yang dipertingkatkan bagi coretan kod yang disediakan:
<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>
Dalam versi yang dipertingkatkan ini , anda boleh melihat dengan jelas perubahan berikut:
Menggunakan kelas ini dengan berkesan memastikan item di luar runtuh kekal kelihatan manakala bahagian boleh lipat diutamakan apabila titik putus dicapai.
Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Bootstrap 4 Item Navbar di Luar Bahagian Runtuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!