Bootstrap 4 列表组对齐徽章答案

【问题标题】：Bootstrap 4 List Group align badgeBootstrap 4 列表组对齐徽章
【发布时间】：2017-06-13 07:46:00
【问题描述】：

您好，我有带有字体图标、文本和徽章的列表组。我想将徽章向右对齐，但不知道如何。在文档中，只有一个 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>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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;
}

【讨论】：

谢谢，它有效。而 justify-content-between 是没用的，它根本不必存在
其实只有margin-left：auto是重要的部分

【解决方案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/

【讨论】：

我猜你的答案比选择的答案好。谢谢。