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

Bootstrap 4: Persistente Navigationsleistenelemente außerhalb des minimierten Containers

Das Navigieren auf einer Website kann frustrierend sein, wenn wichtige Links, wie z. B. Social-Media-Symbole, verschwinden, wenn die Navigationsleiste auf eine kleinere reduziert wird Bildschirme. Glücklicherweise bietet Bootstrap 4 eine elegante Lösung, um bestimmte Navigationsleistenelemente auch dann sichtbar zu halten, wenn das Menü reduziert ist.

Problem

Das Problem tritt auf, wenn die Navigationsleiste so eingestellt ist, dass sie minimiert wird, wenn die Bildschirmbreite schmaler wird . Dieses Verhalten wird durch die Klasse .collapse gesteuert. Standardmäßig werden alle Elemente im .collapse-Container ausgeblendet, wenn die Minimierung aktiviert ist.

Lösung

Um zu verhindern, dass bestimmte Navigationsleistenelemente mit der Minimierung verschwinden, verschieben Sie sie einfach aus dem .collapse-Container . Dies kann mithilfe der Dienstprogrammklassen „order-*“ erreicht werden, um die Flexbox-Reihenfolge der Elemente anzupassen.

Codebeispiel

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

In diesem Beispiel werden die Social-Media-Symbole in einem Container platziert außerhalb des .collapse-Elements. Die Klassen d-flex und order-* stellen sicher, dass die Symbole in der richtigen Reihenfolge und Position bleiben, wenn die Navigationsleiste ausgeblendet ist.

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