Bagaimana untuk Memastikan Item Navbar Kelihatan di Luar Runtuh dalam Bootstrap 4?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-10-27 19:09:01

asal

509 orang telah melayarinya

How to Keep Navbar Items Visible Outside the Collapse in Bootstrap 4?

Item Navbar Di Luar Runtuh dalam Bootstrap 4

Masalah: Mengekalkan pautan navbar yang berterusan di luar bekas yang runtuh dalam Bootstrap 4 telah menjadi isu yang mengganggu . Pengguna menginginkan pautan yang kekal kelihatan walaupun bar navigasi runtuh.

Penyelesaian:

Menggunakan kelas utiliti flexbox ialah kaedah paling mudah untuk menangani isu ini. Jauhkan item berterusan daripada 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>

Salin selepas log masuk

Perhatikan penggunaan kelas pesanan responsif-* untuk memastikan item menu runtuh kekal pada penghujung (order-3) apabila berada dalam kelas runtuh /titik putus mudah alih.

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