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：显示徽章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列表组对齐徽章

2 个答案: