ブートストラップ4ベータ版では、最後のnavアイテムを右揃えにする方法は？

Question

私はこの単純なブートストラップ4中3のnav-項目とNAV、ベータ版があります、私が望む何

NAV-項目にある：それはこのようになります

<div class="container"> 
    <ul class="nav nav-pills"> 
     <li class="nav-item"> 
     <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a> 
     </li> 
    </ul> 
</div> 

をTest3をul内で右揃えにします。ここで

はjsfiddleです。

どうすればいいですか？

Answer 1

最後の項目にml-autoを追加するとできます。これにより、左余白がautoに設定されます。つまり、利用可能な最大スペースが余白として使用されるため、右に移動します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <ul class="nav nav-pills"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a> 
 
     </li> 
 
     <li class="nav-item ml-auto"> 
 
     <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a> 
 
     </li> 
 
    </ul> 
 
</div>