问题描述
在Bootstrap 3 list-group-item 中，我有一个图标，一些文字和两个应该向右浮动的图标/按钮。
In a Bootstrap 3 list-group-item, I have an icon, some text, and two icons / buttons that should float right.
我试过这个：
<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>
如果结果适合一行，这个效果很好：
This works great if the result fits in one line:
当窗口太薄以至于实际文本不适合一行时，它也可以工作：
It also works when the window is so thin that the actual text does not fit in one line:
但是，如果窗口允许文本留在一条线，但没有足够的空间用于拉右跨度，事情搞砸了：
However, if the windows allows the text to stay in one line, but there is not enough space for the pull-right spans, things get messed up:
我真正想要的是 pull-right spans开始一个新行并对齐， list-group-item 垂直扩展以适合它们。我怎样才能做到这一点？
What I'd actually want is that the pull-right spans start a new line and align right, and the list-group-item extends vertically for them to fit. How can I achieve that?
推荐答案
保持按钮对齐，围绕它们包裹一个新元素并浮动包裹元素。然后使用 .clearfix 类清除列表项上的 float 以修复它们的高度。
To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the float on list items with the .clearfix class to fix their height.
<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>
在此处查看实时示例：。
See live example here: http://jsfiddle.net/cdog/EpG7x/.
但是，在链接中放置按钮无效根据。
However, placing buttons within a link is not valid according to the HTML5 specification from W3C.
使用带有表格的面板可以实现类似的结果。
A similar result can be achieved using panels with tables instead.
<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 class（在Bootstrap v3.2.0中添加）。
To prevent content inside a cell from wrapping, you can use the .text-nowrap class (added in Bootstrap v3.2.0).
在此处查看实例：。
这篇关于Bootstrap 3：在list-group-item中浮动的span元素不会消耗垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！