使用twitter bootstrap,如何让缩略图(如缩略图组件中)具有相同的高度?

时间:2012-10-16 11:11:06

标签: twitter-bootstrap responsive-design

您可以在示例中看到http://twitter.github.com/bootstrap/components.html#thumbnails,其中包含标题和说明,如果单元格的标题或描述比另一个单元格更短或更长,则整个块的高度将会减小或相应增加。

如何让这些块具有相同的高度?

我尝试在display: table-row上设置ul,在display: table-cell课程设置.thumbnail但不幸的是,这完全掩盖了布局的响应性:图像高度和块内的宽度不再自动调整大小。

更新:在jsfiddle http://jsfiddle.net/kwBuW/7/

上设置问题演示

1 个答案:

答案 0 :(得分:4)

也许你可以修复得到缩略图类的高度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);