ブートストラップ4のnav-link要素に異なるアライメントを与える方法は？ブートストラップ4を使用して

Question

、私はこれらの3 NAV-link要素があります。

<ul class="nav nav-pills"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Item1</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Item2</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Item3</a> 
    </li> 
</ul> 

を私の質問はこれです：どのように私は（彼らは今のように）アイテム1とアイテム2は左詰めておくが、ITEM3は右揃えすることができますか？

私はjsfiddle hereを作成しました。

Answer 1

だけjsfiddleでコードをしようと

<ul class="nav nav-pills"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Item1</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Item2</a> 
    </li> 
    <li class="nav-item ml-auto"> 
    <a class="nav-link" href="#">Item3</a> 
    </li> 
</ul> 

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

Answer 2

margin-left: autoの行はflex親であり、フレックスチャイルドの自動左余白が利用可能なスペースを埋めるので、margin-left: autoを使用できます。

body { 
 
    margin: 10px; 
 
} 
 

 
.nav li:last-child { 
 
    margin-left: auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-pills"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link active" href="#">Item1</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#">Item2</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#">Item3</a> 
 
    </li> 
 
</ul>