Bootstrap 4 Navbar, mit Dropdown-Menüs und Responsive Template?

Question

Für B3 gibt es Tonnen von Vorlagen einer oberen Navigationsleiste, mit Dropdown-Menüs. Wenn die Bildschirmgröße klein wird, wird das Menü auf die 3-Balken-Schaltfläche reduziert und die Menüs werden zu Akkordeonmenüs.

Gibt es Beispiele oder Vorlagen, die dies mit Bootstrap 4 tun? Die reaktionsfähigen Beispiele, die ich gefunden habe, reduzieren das Menü und zeigen die 3-Balken-Taste, aber die Menüs werden keine Akkordeon-Menüs. Es gibt auch viele Drop-Down-Beispiele für BS4, aber nicht von ihnen auf responsive.

Muss ich nur die gesamte Navigationsleiste ausblenden, wenn der Bildschirm klein wird und einen Akkordeon mit den gleichen Optionen zeigt? Dies scheint viel mehr Arbeit als BS3.

Answer 1

zu Meine Lösung wäre, einfach eine Medienanfrage an Ihre benutzerdefinierte CSS hinzufügen, die die Bildschirmgröße richtet, wo die Navigation ausgeblendet ist, dann Elemente beliebig stylen Sie mögen:

@media (max-width: 544px) { 
    .navbar-brand { 
    display:none; 
    } 
    .navbar-nav .nav-item { 
    float:none; 
    } 
    .navbar-nav .nav-item + .nav-item{ 
    margin-left:0; 
    } 
} 

hier ein simple example on CodePen . Nicht sehr anspruchsvoll, aber es sollte den Punkt verdeutlichen.