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:

1. Item yang anda ingin simpan di luar keruntuhan terletak di luar div navbar-collapse.
2. Kami telah menggunakan d-flex flex -baris kelas ke bekas di mana item berterusan berada. Ini memastikan item ini kekal dalam baris mendatar.
3. Kelas pesanan-* digunakan. Ini ialah kelas utiliti pesanan responsif yang menentukan kedudukan elemen dalam bekas fleksibel apabila berada dalam titik putus skrin yang berbeza.
4. Kelas pesanan-2 order-lg-3 telah digunakan pada bekas yang mengandungi item berterusan. Ini memastikan item tersebut kekal tertib kedua semasa port pandang mudah alih dan tertib ketiga pada skrin yang lebih besar.
5. Kelas order-3 order-lg-2 telah digunakan pada div navbar-collapse, memastikan bahawa item boleh lipat diutamakan pada mudah alih dan menjadi urutan kedua pada skrin yang lebih besar.

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!