Twitter boostrap确保缩略图框的高度相等 [英] Twitter boostrap ensure equal heights of thumbnail boxes

问题描述

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

I'm currently developing a site where I am using Twitter Boostrap for the frontend. On the frontpage I have three boxes (thumbnail boxes in Twitter Boostrap terms) which contains an image and some text. The problem, though, is that these boxes can be of different heights depending on either the height of the image and the amount of description text.

我的标记如下:

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

我尝试使用此插件，实例化如下:

I have tried with this plugin, instantiating it like this:

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

没有任何效果:-/

我也尝试了以下方法:

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

但是它将缩略图框设置为90px高度.

But then it sets the thumbnail boxes to 90px height.

有人知道解决方案吗?

谢谢.

推荐答案

将window.load更改为准备好文档.快一点.

Change your window.load to document ready. It's a bit faster.

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

这篇关于Twitter boostrap确保缩略图框的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！