Bootstrap 3：在list-group-item中浮动的span元素不会消耗垂直空间 [英] Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space

问题描述

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

在此处查看实时示例： http://jsfiddle.net/cdog/EpG7x/ 。

See live example here: http://jsfiddle.net/cdog/EpG7x/.

但是，在链接中放置按钮无效根据 HTML5规范来自W3C 。

However, placing buttons within a link is not valid according to the 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).

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

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

在此处查看实例： http://jsfiddle.net/cdog/6mFDH/ 。

这篇关于Bootstrap 3：在list-group-item中浮动的span元素不会消耗垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！