引导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列表组对齐徽章

回答

相关问题