当标题太长时修复Bootstrap缩略图大小

Question

我使用bootstrap中的class="thumbnail"和class="caption"生成此演示文稿。

问题是，当其中一张卡的标题为1行时，它会变得更大并且会使我col-md-3或col-md-4

如果标题将在两行上延伸，我如何确保所有卡片的大小相同。

注意标题变长后高度如何增加

谢谢！

Answer 1

您需要截断您的标题，请参阅示例：

$('button').on('click', function() {
  $('p').toggleClass('ellipses');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:120px">
  <button>Toggle Ellipses</button>
  <p class="ellipses">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>

Answer 2

您可以使用Flexbox http://v4-alpha.getbootstrap.com/getting-started/flexbox/，但请阅读有关浏览器支持的详细信息。有关如何使用Flexbox网格的更多详细信息，请访问http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

一个例子 http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 3

这是一个糟糕的Bootstrap机制，这里没有解决它的解决方案。

您可以选择以下方法之一来修复它：

1. 您可以设置标题栏或整个容器的固定高度。

2. 您可以使用JS计算最大容器的高度并将此高度设置为所有容器。

3. 您可以使用其中一个JS库来制作漂亮的马赛克网格（如this）。其中一个库 - Masonry。