Wie bleiben Navbar-Elemente sichtbar, wenn die Navbar in Bootstrap 4 zusammenbricht?-CSS-Tutorial-php.cn

Wie bleiben Navbar-Elemente sichtbar, wenn die Navbar in Bootstrap 4 zusammenbricht?

Barbara Streisand

Freigeben： 2024-10-27 16:34:29

Original

1014 Leute haben es durchsucht

How to Keep Navbar Items Visible When the Navbar Collapses in Bootstrap 4?

Bootstrap 4 Navbar-Elemente, die außerhalb des Einflusses des Zusammenbruchs bestehen bleiben

In Bootstrap 4 kann es eine Herausforderung sein, persistente Navbar-Elemente außerhalb des zusammengebrochenen Containers beizubehalten . Hier finden Sie eine ausführliche Erklärung und eine Lösung für dieses Problem:

Problembeschreibung:

Wenn die Navigationsleiste minimiert wird, werden Elemente, die außerhalb des minimierten Bereichs liegen, ausgeblendet, was dazu führt unerwünschter Effekt, der in den bereitgestellten Bildern gezeigt wird.

Lösung:

Die folgende Lösung nutzt Flexbox-Dienstprogrammklassen, um die persistenten Elemente außerhalb des zusammenklappbaren Bereichs zu halten:

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

Nach dem Login kopieren

Erklärung:

Die persistenten Elemente werden innerhalb eines
platziert. mit den Klassen d-flex, flex-row, order-2 und order-lg-3.
Dieses Div bleibt unabhängig vom Haltepunkt in der gleichen Reihenfolge, um sicherzustellen, dass die persistenten Elemente immer sichtbar sind.
Dem div „collapse navbar-collapse“ werden die Klassen „order-3“ und „order-lg-2“ zugewiesen.
Diese Klassen geben an, dass die reduzierbaren Elemente zuletzt (order-3) im minimierten/ mobiler Haltepunkt und zweiter (Order-2) in den anderen Haltepunkten.
Die Klassen „navbar-light“ und „navbar-expand-lg“ sorgen für den passenden Stil für die Navigationsleiste.

Diese Lösung stellt sicher, dass die dauerhaften Navigationsleistenelemente auch dann sichtbar bleiben, wenn die Navigationsleiste ausgeblendet wird.

Das obige ist der detaillierte Inhalt vonWie bleiben Navbar-Elemente sichtbar, wenn die Navbar in Bootstrap 4 zusammenbricht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!