引導4列表組對齊徽章

你好，我有名單組與字體圖標，文本和徽章。我想把徽章對齊，但不知道如何。在文檔中，只有一個證明內容的例子，但是證明所有三個元素之間的內容是正確的，我只需要徽章就行。引導4列表組對齊徽章

https://jsfiddle.net/matejvrzala/c0u7px6L/

如果我把證明內容之間的字體圖標之後，在沒有做任何事情。

<ul class="list-group"> 
    <li class="list-group-item active"> 
    <i class="fa fa-user" aria-hidden="true"></i> 
     <div class="justify-content-between"> 
     Cras justo odio<span class="badge badge-default badge-pill">14</span>   
     </div> 
    </li> 
</ul>

來源

2017-01-27 Matej Vrzala M4

步驟1：取徽章的div外：

<li class="list-group-item active"> 
    <i class="fa fa-user" aria-hidden="true"></i> 
    <div class="justify-content-between">Cras justo odio</div> 
    <span class="badge badge-default badge-pill">14</span> 
</li>

步驟2：顯示徽章撓曲並給它一個保證金左：汽車;

.badge { 
display: flex; 
margin-left: auto; 
}

來源

2017-01-27 15:35:51 lopezi

感謝，它的工作原理。並且證明內容之間沒有用處，它根本不需要存在 –

實際上只有margin-left：auto是重要的部分 –

試試這個）

<ul class="list-group"> 
    <li class="list-group-item active"> 
     <div class="user"> 
     <i class="fa fa-user" aria-hidden="true"></i> 
     Cras justo odio 
     </div> 
     <span class="badge badge-default badge-pill">14</span> 
    </li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 

.fa { 
    margin-right: 15px; 
} 

.list-group-item { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
}

現場演示 - https://jsfiddle.net/c0u7px6L/1/

來源

2017-01-27 16:35:26 grinmax

引導4列表組對齊徽章

回答

相關問題