html - Bootstrap 4 列表组对齐徽章

Question

您好，我有带有字体图标、文本和徽章的列表组。我想将徽章右对齐，但不知道如何对齐。在文档中只有一个带有 justify-content-between 的示例，但它证明了所有三个元素之间的内容，我只希望徽章正确。

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

如果我将 justify-content-between 放在字体图标之后，它不会执行任何操作。

<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>

Answer 1

第 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 flex 并给它一个 margin-left: auto;

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