bootstrap 4: Anzeigen von Navi -Elementen außerhalb von Container

Bei der Verwendung von Bootstrap sind eine gemeinsame Herausforderung, bestimmte Navigationselemente anhaltend außerhalb des zusammengebrochenen Containers anzuzeigen. Standardmäßig sind alle Navigationselemente versteckt, wenn die Navigationsleiste in kleineren Bildschirmen zusammenbricht. Lassen Sie uns eine einfache Lösung für dieses Problem untersuchen.

Der einfachste Weg, um Navi -Elemente unabhängig vom Zusammenbruchstatus sichtbar zu halten, besteht darin, die von Bootstrap bereitgestellten Flexbox -Dienstprogrammklassen zu verwenden. This approach avoids the need for additional CSS.

Code Solution

In the following code, the items that need to stay visible during the collapsed state are kept outside the .navbar-collapse div:

Erklärung

im obigen Code:

• Die .d-flex .flex-reie Klassen stellen sicher, dass die Navig-Elemente horizontal in einer Reihe angezeigt werden. Links, wenn die Bildschirmgröße zunimmt (Order-LG-3).
• Die .Order-3 .Orde-LG-2-Klasse platziert die Kollaps-Taste und Menüelemente links in kleineren Bildschirmen (Order-3) und rechts, wenn die Bildschirmgröße zunimmt (Order-LG-2). Die Gegenstände bleiben auch dann sichtbar, wenn die Navigation zusammengebrochen ist.