Heim > Artikel > Web-Frontend > 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:
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!