我最近将我的项目从 Bootstrap 3.2.x 更新到 3.3.2（最后一个版本），我发现与媒体对象 http://getbootstrap.com/components/#media元素。
我想在媒体标题中使用特殊的 less mixin .text-overflow() 将以下 css 属性添加到标题中：
.media-heading {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这在 Bootstrap 3.2 中运行良好（非常好），您可以在以下 plnkr 中看到它：3.2 中的媒体列表 http://plnkr.co/edit/B7cGRbw8DxtnXgFhnmvM?p=preview
但是，从 3.3.x 开始，我不能在 header 中使用省略号和文本溢出：3.3.2 中的媒体列表 http://plnkr.co/edit/GAqClT8LZlSSSwduXEa0?p=preview
You can compare the picture below :
So, how can I have the same behavior I describe with Bootstrap 3.2 in Bootstrap 3.3.x ? (It is very useful for mobile user for example).
更多信息 ：媒体对象布局的修改在 3.3.0 中引入，并且关于此修改的问题已打开（并关闭） https://github.com/twbs/bootstrap/issues/14990并引起了众多用户的反响。 解决方案是将媒体对象（media、media-body）的大小设置为 10000px。
它看起来像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;
}