Bootstrap 3.3.2中的媒体列表和文本溢出

Question

我最近将我的项目从Bootstrap 3.2.x更新到3.3.2(上一版本),我发现了与Media Object元素的重要区别.

我想在媒体标题中使用特殊的less mixin .text-overflow()将以下css属性添加到标题中:

.media-heading {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

在Bootstrap 3.2中运行良好(非常好),您可以在以下plnkr中看到它:3.2中的Media-List

但是,从3.3.x开始,我无法在头文件中使用省略号和文本溢出:3.3.2中的Media-List

你可以比较下图: 那么,我怎样才能在Bootstrap 3.3.x中使用Bootstrap 3.2描述相同的行为？(例如,它对移动用户非常有用).

更多信息: 媒体对象中的布局修改在3.3.0中引入,并且关于此修改打开(并关闭)了一个问题,并且对许多用户产生了影响.解决方案是将媒体对象(媒体,媒体体)的大小设置为10000px.

Answer 1

看来display: table-cell;下面的规则是导致问题的原因。覆盖它应该可以解决问题。

.media-left, .media-right, .media-body {
  display: table-cell; /* Here is the issue */
  vertical-align: top;
}

添加下面的代码片段似乎恢复了 3.2 的功能，但谁知道这可能会因 3.3.1 代码而产生其他问题......

.media-left, .media-right, .media-body {
  display: block;
}

另外，这不适用于最新版本（当前为 3.3.2），因为.media-body出于某种原因，宽度设置为 10000px...将其更改为width: auto加上上面的更改似乎使其可以在 3.3.2 上工作。但同样，我不知道这可能会产生什么其他问题。

.media-body {
  width: 10000px;
}