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

但是,根据W3C的HTML5规范,在链接中放置按钮是无效的.

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