jquery - Twitter Bootstrap 确保缩略图框的高度相等

Question

我目前正在开发一个网站，我在其中使用 Twitter Boostrap 作为前端。在首页上，我有三个框(Twitter Boostrap 术语中的缩略图框)，其中包含一个图像和一些文本。但问题在于，这些框的高度可能会根据图像的高度和描述文本的数量而有所不同。

我的标记如下:

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/1.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>          
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/2.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/3.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
</ul>

我试过 this plugin ，像这样实例化它:

<script>
    $().ready(function () {
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

没有任何影响:-/

我还尝试了以下方法:

// Ensure equal heights on thumbnail boxes
$('.thumbnail').css({
    'height': $('.thumbnail').height()
});

但随后它将缩略图框设置为 90px 高度。

有人知道解决这个问题的方法吗？

提前致谢。

Answer 1

将您的 window.load 更改为文档就绪。速度有点快。

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>