本文介绍了Bootstrap 3:在list-group-item中浮动的span元素不会消耗垂直空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在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元素不会消耗垂直空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:17