Bootstrap 4 navbar-toggler mit separaten Navbar-Links

Question

Ich habe eine feste Navbar gemacht, die einen navbar-toggler auf allen Geräten sichtbar haben muss (ich habe navbar-toggable-md class entfernt, um das zu erreichen). Es muss auf der linken Seite sein, mit der Navbar-Marke davor, während ein anderer Satz von Links (außerhalb des Togglers) auf der rechten Seite sein muss.

So:

Die Sache ist, egal was ich tue, diese richtigen Links verweigern inlined und meine navbar geht in zwei Reihen zu bleiben.

Hier ist die grundlegende Gliederung des Codes, mit dem ich gearbeitet habe. Was mache ich falsch?

<nav class="navbar navbar-inverse fixed-top bg-inverse"> 
     <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     <div class="collapse navbar-collapse" id="navbarCollapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
     </div> 
    <div class="float-right"> 
    <a>Link</a> 
    </div> 
</nav> 

Jemand, bitte helfen! Vielen Dank!

Answer 1

Ändern Sie die Navigationsleiste in flex-row. Standardmäßig ist es die direction: column, die dazu führt, dass die Navbar-Elemente vertikal in 2 Reihen gestapelt werden, wie Sie es sehen.

Auch setzen die zusätzliche Verbindung (en) nach dem Brand, und verwenden ml-auto ihn nach rechts zu schieben ...

<nav class="navbar navbar-inverse fixed-top bg-inverse flex-row flex-wrap"> 
    <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
    </ul> 
    <div class="collapse navbar-collapse w-100" id="navbarCollapse"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

http://www.codeply.com/go/CUCeeElIcI