css – 引导3：在列表组中浮动的跨度元素不占用垂直空间

在Bootstrap 3列表组项目中，我有一个图标，一些文本和两个应该向右浮动的图标/按钮。

我试过这个：

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

如果结果符合一行，这很有用：

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

然而，如果窗口允许文本保留在一行，但是没有足够的空间用于右对齐跨度，事情会变得混乱：

我实际想要的是，右侧跨距开始一条新行并对齐，并且list-group-item垂直延伸以使它们适合。我如何实现呢？

解决方法

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

<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，将链接放置在链接中是无效的。

The 07002 element may be wrapped around entire paragraphs,lists,tables,
and so forth,even entire sections,so long as there is no interactive
content within (e.g. buttons or other links).

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

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