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

Barbara Streisand
Lepaskan: 2024-10-27 16:34:29
asal
911 orang telah melayarinya

How to Keep Navbar Items Visible When the Navbar Collapses in 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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!