Wie positioniere ich Bootstrap 4 Navbar-Elemente außerhalb des Minimierungsabschnitts?

Bootstrap 4: Navigationsleistenelemente außerhalb des Minimierungsbereichs positionieren

Das Navigieren in der Navigationsleiste von Bootstrap 4 kann schwierig sein, insbesondere wenn es darum geht, bestimmte Elemente beizubehalten außerhalb des zusammenklappbaren Abschnitts. Vielen Entwicklern fällt es schwer, sicherzustellen, dass bestimmte Elemente unabhängig vom Minimierungsstatus persistent bleiben.

Um dieses Problem zu beheben, besteht der einfachste Ansatz darin, Flexbox-Dienstprogrammklassen zu verwenden. Dadurch ist kein zusätzliches CSS erforderlich und die gewünschten Elemente bleiben sauber außerhalb des Navbar-Collapse-Divs.

Unten finden Sie eine verbesserte Version des bereitgestellten Code-Snippets:

<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 dieser verbesserten Version , können Sie die folgenden Änderungen deutlich erkennen:

1. Die Elemente, die Sie außerhalb des Einsturzbereichs behalten möchten, befinden sich außerhalb des Navigationsleisten-Einsturzbereichs.
2. Wir haben den D-Flex-Flex angewendet -row-Klassen auf den Container, in dem sich die persistenten Elemente befinden. Dadurch wird sichergestellt, dass diese Elemente in einer horizontalen Reihe bleiben.
3. Es werden die order-*-Klassen verwendet. Hierbei handelt es sich um responsive Ordnungsdienstprogrammklassen, die die Position eines Elements innerhalb des Flex-Containers bestimmen, wenn es sich an verschiedenen Bildschirmhaltepunkten befindet.
4. Die Klasse order-2 order-lg-3 wurde auf den Container angewendet, der die persistenten Elemente enthält. Dadurch wird sichergestellt, dass diese Elemente in mobilen Ansichtsfenstern an zweiter Stelle und auf größeren Bildschirmen an dritter Stelle bleiben.
5. Die Klasse „order-3 order-lg-2“ wurde auf das Div „navbar-collapse“ angewendet, um dies sicherzustellen Die zusammenklappbaren Elemente haben auf Mobilgeräten Vorrang und werden auf größeren Bildschirmen an zweiter Stelle.

Durch die effektive Nutzung dieser Klassen wird sichergestellt, dass die Elemente außerhalb der Zusammenfaltung sichtbar bleiben, während der zusammenklappbare Abschnitt Vorrang hat, wenn der Haltepunkt erreicht ist.

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