Bagaimana untuk Memastikan Item Bootstrap 4 Navbar Kelihatan di Luar Bekas yang Runtuh?

Bootstrap 4: Memaparkan Item Navbar Di Luar Bekas yang Diruntuhkan

Apabila menggunakan Bootstrap, cabaran biasa ialah memaparkan item navbar tertentu secara berterusan di luar bekas yang runtuh. Secara lalai, semua item navbar disembunyikan apabila navbar runtuh dalam skrin yang lebih kecil. Mari kita terokai penyelesaian mudah untuk isu ini.

Cara paling mudah untuk memastikan item navbar kelihatan tanpa mengira keadaan runtuh adalah dengan menggunakan kelas utiliti flexbox yang disediakan oleh Bootstrap. Pendekatan ini mengelakkan keperluan untuk CSS tambahan.

Penyelesaian Kod

Dalam kod berikut, item yang perlu kekal kelihatan semasa keadaan runtuh disimpan di luar div .navbar-collapse:

<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>

Penjelasan

Dalam kod di atas:

• Kelas .d-flex .flex-row memastikan item navbar dipaparkan secara mendatar dalam satu baris .
• Kelas .order-2 .order-lg-3 meletakkan item di hujung kanan dalam skrin yang lebih kecil (order-2) dan mengalihkannya ke kiri apabila saiz skrin meningkat (order-lg- 3).
• Kelas .order-3 .order-lg-2 meletakkan butang runtuh dan item menu di sebelah kiri dalam skrin yang lebih kecil (pesanan-3) dan di sebelah kanan apabila saiz skrin meningkat (pesanan -lg-2).

Dengan menggunakan kelas utiliti flexbox, kami boleh mengawal reka letak bar navigasi dengan elegan, memastikan item tertentu kekal kelihatan walaupun bar navigasi runtuh.

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