Bootstrap 4の右にあるいくつかのnav-pills要素を整列させてください

Question

私は、Bootstrap 4-beta2のnav-pillsを使ってタブ付きインターフェイスを実装しています。

一部の要素を画面の右側に揃えるにはどうすればよいですか？

最後にml-autoを設定すると、liアイテムは機能しません。 ulを2つのulに分割すると、が同時にアクティブになることが許可されている（たとえば、tableft1）ため、どちらも機能しません。

<nav class="fixed-top bg-dark"> 
    <div class="navbar"> 
     <a class="navbar-brand" href="#tabmain">Brand</a> 
     <ul class="nav nav-pills mr-auto"> 
      <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li> 
      <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li> 
      <li class="nav-pill"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

navbarはそうフレックス固有のクラスが支援している、フレックスで判明：

<nav class="fixed-top bg-dark"> 
    <div class="navbar justify-content-start flex-nowrap"> 
     <a class="navbar-brand" href="#tabmain">Brand</a> 
     <ul class="nav nav-pills w-100"> 
      <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li> 
      <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li> 
      <li class="nav-pill ml-auto"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li> 
     </ul> 
    </div> 
</nav> 

を