Html Bootstrap 3：在列表组项中向右浮动的跨度元素不占用垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22868664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space
提问by fefrei
In a Bootstrap 3 list-group-item, I have an icon, some text, and two icons / buttons that should float right.
在 Bootstrap 3 中list-group-item，我有一个图标、一些文本和两个应该向右浮动的图标/按钮。
I tried this:
我试过这个：
<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:
但是，如果窗口允许文本保持在一行中，但没有足够的空间用于右拉跨度，事情就会变得一团糟：
What I'd actually want is that the pull-rightspans start a new line and align right, and the list-group-itemextends vertically for them to fit. How can I achieve that?
我真正想要的是pull-right跨度开始一条新线并正确对齐，并且list-group-item垂直延伸以适应它们。我怎样才能做到这一点？
回答by cdog
To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the floaton list items with the .clearfixclass to fix their height.
为了保持按钮对齐，在它们周围包裹一个新元素并浮动包裹元素。然后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>
See live example here: http://jsfiddle.net/cdog/EpG7x/.
在此处查看现场示例：http: //jsfiddle.net/cdog/EpG7x/。
However, placing buttons within a link is not valid according to the HTML5 specification from W3C.
但是，根据W3C的HTML5 规范，在链接中放置按钮是无效的。
The
aelement 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).
所述
a元件可以被缠绕在整个段落，列表，表格，等等，甚至整个部分，所以只要有内（例如按钮或其它链接）没有交互内容。
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>
To prevent content inside a cell from wrapping, you can use the .text-nowrapclass (added in Bootstrap v3.2.0).
为了防止单元格内的内容被换行，您可以使用.text-nowrap该类（在 Bootstrap v3.2.0 中添加）。
See live example here: http://jsfiddle.net/cdog/6mFDH/.
请参阅此处的实时示例：http: //jsfiddle.net/cdog/6mFDH/。
回答by SHUBHASIS MAHATA
<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>
This will work for bootstrap 4.0 latest v
这适用于 bootstrap 4.0 最新版本
