ブートストラップ4 navbar-toggler with separate navbar links

Question

私はすべてのデバイスでnavbar-togglerを表示する必要がある固定navbarを作っています（これを達成するにはnavbar-toggleable-mdクラスを削除しました）。その前にnavbar-brandが置かれていなければならず、別のリンクが（トグラーの外に）右にある必要があります。このよう

：

事は、関係なく、私は何をすべきか、それらの権利のリンクはインラインとどまることを拒否されていないと私のナビゲーションバーには、二列になります。

ここでは、私が作業しているコードの基本的な概要を示します。私は間違って何をしていますか？

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

誰か、助けてください！ありがとうございました！

Answer 1

navbarをflex-rowに変更してください。デフォルトでは、direction：columnは、あなたが見ているようにnavbar要素を縦に2列に積み重ねます。

また、ブランドの後に余分なリンク（複数可）を入れて、右にプッシュするml-autoを使用して...

<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