Twitter的自举保证的缩略图箱相等的高度(Twitter boostrap ensure equ

我目前正在开发，其中我使用Twitter的自举针对前端站点。 在FrontPage我有三个框（在Twitter的自举方面缩略图盒），其中包含的图片和一些文字。 但问题是，这些框可以是根据图像的任一高度和描述文本的量不同的高度。

我的标记如下：

<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>

我试图用这个插件 ，实例化这样的：

<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>

Answer 2:

是的，有只CSS的解决方案。

HTML：

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

CSS

.thumbnail:nth-child(3n+1) {
    clear: left;
}

（在上面的例子中，每3个大拇指，它会断一次线。只需将其配置在所有的断点，它会工作fine.`

文章来源: Twitter boostrap ensure equal heights of thumbnail boxes