Bootstrap 4 列表组对齐徽章

Question

您好，我有带有字体图标、文本和徽章的列表组。我想将徽章右对齐，但不知道如何对齐。在 docs 中只有一个带有 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 步：显示徽章 flex 并给它一个 margin-left: auto;

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

Answer 2

试试这个）

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

Bootstrap 4 列表组对齐徽章

Bootstrap 4 List Group align badge

html

css

twitter-bootstrap

bootstrap-4