ブートストラップ4のナビゲーション、右側のボタンが左側のトグルでモバイルの折りたたみから除外されていますか？

Question

私は、左側にトグルボタン付き折り畳み式ブートストラップ4ナビゲーションを用意しようとしています。これは問題ではありませんが、ナビゲーションの右側にアクションボタン（またはボタン）も表示しようとしています。

ナビゲーションバーの折りたたみメニューから除外されているボタン/リンクを右側に表示するにはどうすればよいですか。さらに、展開時にこれらの項目を押し下げて、ナビゲーションバーの折りたたみメニューを押さないようにするにはどうすればよいですか？私は右のボタンを浮かべることができますが、これも問題を引き起こします。

画像を参照してください：現在の実装の

ライブCodeply例：あなたはこのようなフレキシボックスutilsパッケージを使用する必要があります https://www.codeply.com/go/IDCOYUVXCH

Answer 1

...

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

を

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-inverse"> 
    <div class="container d-flex flex-row flex-md-nowrap flex-wrap"> 
    <a href="#" class="hidden-lg-up my-2 mr-3" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"> 
     <i class="fa fa-bars text-white"></i> 
    </a> 
    <a class="navbar-brand" href="#">Brand</a> 
    <div class="navbar-collapse collapse flex-md-unordered flex-last" id="navbarCollapse"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Link <span class="sr-only">Home</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="d-flex ml-auto"> 
     <ul class="navbar-nav"> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Right</a> 
      </li> 
     </ul> 
    </div> 
    <div class="hidden-md-up w-100"><!--hidden spacer to force wrap--></div> 
    </div> 
</nav> 

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