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

Bootstrap 4 Navbar Item Yang Berkekalan Di Luar Pengaruh Runtuh

Dalam Bootstrap 4, mengekalkan item navbar yang berterusan di luar bekas yang runtuh boleh menjadi satu cabaran . Berikut ialah penjelasan terperinci dan pembetulan untuk isu ini:

Pernyataan Masalah:

Apabila navbar runtuh, item yang berada di luar bahagian runtuh menjadi tersembunyi, membawa kepada kesan yang tidak diingini ditunjukkan dalam imej yang disediakan.

Penyelesaian:

Penyelesaian berikut menggunakan kelas utiliti flexbox untuk menyimpan item berterusan di luar kawasan boleh lipat:

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

• Item berterusan diletakkan dalam
  dengan kelas d-flex, flex-row, order-2 dan order-lg-3.
• Div ini kekal dalam susunan yang sama tanpa mengira titik putus, memastikan item yang berterusan sentiasa kelihatan.
• Kelas navbar-light dan navbar-expand-lg menyediakan penggayaan yang sesuai untuk navbar.
• Penyelesaian ini memastikan bahawa item navbar yang berterusan kekal kelihatan walaupun apabila navbar runtuh.

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