ブートストラップ4：浮動小数点数をリスト内で縦に整列する

Question

フォントワームアイコンを右に浮動させるにはどうすればよいですか？私はml-autoとFlexboxを使ってみましたが、うまくいきません。ここで

は私のコードです：

<ul class="list-group flex-column"> 
    <li class="list-group-item py-2 d-flex justify-content-start"> 
    <a href="#"> 
     <img src="https://placehold.it/40x40" height="40" class="mr-4"> 
     <span>Text Here</span> 
     <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i> 
    </a> 
    </li> 
</ul> 

誰かが私を助けることができますか？ありがとう！

Answer 1

フレックスとサイジングのヘルパークラスを使用して、左に必要なコンテンツと右のコンテンツの2つの子を持つflex親をリンクします。矢印が右にあり、垂直にセンタリングされるようにコンテンツを分割するには、.justify-content-between, .align-items-centerを使用します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="list-group flex-column"> 
 
    <li class="list-group-item py-2 d-flex"> 
 
    <a href="#" class="d-flex w-100 justify-content-between align-items-center"> 
 
     <span> 
 
     <img src="https://placehold.it/40x40" height="40" class="mr-4"> 
 
     <span>Text Here</span> 
 
     </span> 
 
     <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

は、この構造で試してみてください：

<ul class="list-group"> 
    <li class="list-group-item"> 
    <a class="w-100 d-flex align-items-center py-2" href="#"> 
     <img src="https://placehold.it/40x40" height="40" class="mr-4"> 
     <span>Text Here</span> 
     <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i> 
    </a> 
    </li> 
</ul> 

Click hereはjsfiddleで働いて、それを見るために。

あなたの<a>タグは親全体を満たしませんので、アイコンにの効果が見られません。 d-flexもliではなく、aタグに含まれている必要があります。