Bootstrap 3：在list-group-item中浮动的span元素不会消耗垂直空间

Question

在Bootstrap 3 list-group-item中，我有一个图标，一些文本和两个应该向右浮动的图标/按钮。

我试过这个：

<a class="list-group-item" ng-click="handleClick()">
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button>
    <some:custom:span></some:custom:span> 
</a>

如果结果适合一行，则效果很好：

当窗口太薄以至于实际文本不适合一行时，它也可以工作：

但是，如果窗口允许文本保持在一行中，但是没有足够的空间用于右向跨度，则事情会搞砸：

我真正想要的是pull-right跨越开始一条新线并且右对齐，并且list-group-item垂直延伸以使它们适合。我怎样才能做到这一点？

Answer 1

保持按钮对齐，围绕它们包裹一个新元素并浮动包裹元素。然后使用float类清除列表项上的.clearfix以修复它们的高度。

<div class="list-group">
  <a href="#" class="list-group-item clearfix">
    <span class="glyphicon glyphicon-file"></span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <span class="pull-right">
      <button class="btn btn-xs btn-info">CCS</button>
      <button class="btn btn-xs btn-warning">
        <span class="glyphicon glyphicon-trash"></span>
      </button>
    </span>
  </a>
</div>

在这里查看实例：http://jsfiddle.net/cdog/EpG7x/。

但是，根据HTML5 specification from W3C，在链接中放置按钮无效。

只要在其中没有交互式内容（例如按钮或其他链接），a元素可以围绕整个段落，列表，表格等，甚至整个部分。

使用带有表格的面板可以实现类似的结果。

<div class="panel panel-default">
  <table class="table table-hover">
    <tbody>
      <tr>
        <td>
          <span class="glyphicon glyphicon-file"></span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </td>
        <td class="text-right text-nowrap">
          <button class="btn btn-xs btn-info">CCS</button>
          <button class="btn btn-xs btn-warning">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

要防止单元格内的内容包装，可以使用.text-nowrap类（在Bootstrap v3.2.0中添加）。

在这里查看实例：http://jsfiddle.net/cdog/6mFDH/。

Answer 2

<li class="list-group-item d-flex justify-content-between align-items-center">
Text Here
<a href="javascript:void(0);" onclick="Delete('')"><i class="fas fa-trash-alt"></i></a>
</li>

这适用于bootstrap 4.0最新版本