Wie halte ich Bootstrap 4 Navbar-Elemente außerhalb des reduzierten Containers sichtbar?

Bootstrap 4: Navigationsleistenelemente außerhalb des reduzierten Containers anzeigen

Bei der Verwendung von Bootstrap besteht eine häufige Herausforderung darin, dass bestimmte Navigationsleistenelemente dauerhaft außerhalb des reduzierten Containers angezeigt werden. Standardmäßig werden alle Navigationsleistenelemente ausgeblendet, wenn die Navigationsleiste auf kleineren Bildschirmen ausgeblendet wird. Lassen Sie uns eine einfache Lösung für dieses Problem untersuchen.

Die einfachste Möglichkeit, Navigationsleistenelemente unabhängig vom Minimierungsstatus sichtbar zu halten, ist die Verwendung der von Bootstrap bereitgestellten Flexbox-Dienstprogrammklassen. Dieser Ansatz vermeidet die Notwendigkeit von zusätzlichem CSS.

Codelösung

Im folgenden Code werden die Elemente, die im minimierten Zustand sichtbar bleiben müssen, außerhalb des .navbar-collapse-Divs gehalten:

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

Erklärung

Im obigen Code:

• Die .d-flex .flex-row-Klassen stellen sicher, dass die Navigationsleistenelemente horizontal in einer Reihe angezeigt werden .
• Die Klasse .order-2 .order-lg-3 platziert die Elemente ganz rechts in kleineren Bildschirmen (order-2) und verschiebt sie nach links, wenn die Bildschirmgröße zunimmt (order-lg- 3).
• Die Klasse .order-3 .order-lg-2 platziert die Schaltfläche zum Reduzieren und die Menüelemente links in kleineren Bildschirmen (order-3) und rechts, wenn die Bildschirmgröße zunimmt (order -lg-2).

Durch die Verwendung der Flexbox-Dienstprogrammklassen können wir das Layout der Navigationsleiste elegant steuern und sicherstellen, dass bestimmte Elemente auch dann sichtbar bleiben, wenn die Navigationsleiste minimiert ist.

Das obige ist der detaillierte Inhalt vonWie halte ich Bootstrap 4 Navbar-Elemente außerhalb des reduzierten Containers sichtbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!