引導4導航，左側切換與右側按鈕排除在移動崩潰？

Question

我正試圖在左側的切換按鈕上有一個可摺疊的引導程序4導航。這不是問題，但我也嘗試在導航的右側有一個操作按鈕（或多個按鈕）。

如何在導航欄摺疊菜單中排除右側的按鈕/鏈接。另外，如何在擴展時避免導航欄摺疊菜單壓低這些項目？我可以浮動右鍵，但這也會導致問題。

參考圖像：目前執行的

直播Codeply例如： https://www.codeply.com/go/IDCOYUVXCH

Answer 1

你將不得不使用Flexbox的utils的是這樣的...

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