你可以看这里http://twitter.github.com/bootstrap/components.html#thumbnails在带有标题和描述的示例中,如果一个单元格的标题或描述比另一个短得多或长得多,则 block 的整个高度将相应地减小或增加。
如何使这些 block 具有相同的高度?
我尝试设置 display: table-row
在 ul
, 和 display: table-cell
在 .thumbnail
类,但不幸的是,这完全破坏了布局的响应能力: block 内的图像高度和宽度不再自动调整大小。
更新:在 jsfiddle http://jsfiddle.net/kwBuW/7/ 上设置问题的演示
最佳答案
也许您可以修复具有缩略图类的高度 div。喜欢:
<div class="thumbnail" style="height: 400px;">
如果您希望每个内容都具有相同的高度,我认为您必须编写一个 JavaScript 来修复它,当然,在 DOM 准备好之后。喜欢:
var max = 0, jThumbnails = $("ul.gallery div.thumbnail");
jThumbnails .each(function(index, elt){
max = Math.max(max, $(elt).height());
});
jThumbnails.setHeight(max);
关于twitter-bootstrap - 使用 twitter bootstrap,如何让缩略图(如缩略图组件)具有相同的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12913405/