css - Bootstrap 3 : Span elements floating right in list-group-item do not consume vertical space

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 类清除列表项上的 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 a 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/ .