Bootstrap 4 - Navbar Produkte außerhalb der Zusammenbruch

Question

Ok, so muss ich zugeben, das ist etwas, das ich immer gekämpft haben, mit immer richtig, auch in BS3 zu arbeiten. Aber ich möchte Navigationslinks außerhalb des minimierten Containers haben, die persistent bleiben.

Das ist, was ich jetzt haben:

<nav class="navbar fixed-top navbar-expand-lg navbar-template"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" 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> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li> 
     <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li> 
    </ul> 
</nav> 

Das funktioniert, bis die erste nav in einem zusammengeklappten Zustand ist. Wenn der Zusammenbruch aktiv ist sieht es wie folgt aus:

Hat jemand gefunden eine saubere Lösung für dieses?

Answer 1

Der einfachste Weg, um die Flexbox Utility-Klassen verwendet, so dass keine zusätzlichen CSS benötigt werden. Behalten Sie die Elemente, die Sie immer aus dem navbar-collapse Div anzeigen möchten.

https://www.codeply.com/go/TWZGiy3VGw

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