Bagaimana untuk Memastikan Item Navbar Kelihatan Walaupun Apabila Navbar Runtuh dalam Bootstrap 4?

Bootstrap 4: Item Navbar Berterusan Di Luar Bekas yang Diruntuhkan

Menavigasi tapak web boleh mengecewakan apabila pautan penting, seperti ikon media sosial, hilang apabila navbar runtuh pada yang lebih kecil skrin. Nasib baik, Bootstrap 4 menawarkan penyelesaian yang elegan untuk memastikan item navbar tertentu kelihatan walaupun apabila menu diruntuhkan.

Masalah

Isu timbul apabila navbar ditetapkan untuk runtuh apabila lebar skrin menjadi sempit . Tingkah laku ini dikawal oleh kelas .collapse. Secara lalai, semua elemen dalam bekas .collapse disembunyikan apabila collapse diaktifkan.

Penyelesaian

Untuk memastikan item navbar tertentu daripada hilang dengan collapse, cuma alihkannya ke luar bekas .collapse . Ini boleh dicapai menggunakan perintah-* kelas utiliti untuk melaraskan susunan kotak flex bagi elemen.

Contoh Kod

<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 contoh ini, ikon media sosial diletakkan dalam bekas di luar unsur .runtuh. Kelas d-flex dan order-* memastikan ikon kekal dalam susunan dan kedudukan yang betul apabila bar navigasi runtuh.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Item Navbar Kelihatan Walaupun Apabila Navbar Runtuh dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!