jquery - bootstrap3 中的缩略图高度相等

Question

有什么方法可以使一个缩略图与另一个缩略图的高度相同？

<div class="row">
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h5>Lorem ipsum dolor sit amet</h5>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>  
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h1>how to</h1>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                  <img src="img/3.jpg">
                  <div class="caption">
                    <h5>Lorem ipsum dolor sit amet, consectetur </h5>
                      <a href="#" class="uppercase bold">recipe</a>
                  </div>
                </div>
              </div>
           </div>  

这段代码的结果是，第二个缩略图高度比第一个和 <a href > 高1到另一个之间的高度不同

像这样https://jsfiddle.net/hbfu2b97/1/

如果将结果屏幕放大，您会看到差异。

Answer 1

您需要创建一个运行 onload 的 javscript 函数，捕获所有缩略图，检查哪个缩略图的高度最高，然后遍历缩略图以为它们分配获得的高度:

@fcalderan 在他的回答中有一个很好的解决方案: https://stackoverflow.com/a/9279339/2611451

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

我已经更新了你的 fiddle :https://jsfiddle.net/hbfu2b97/6/

更新

为了使食谱链接与底部对齐，我将 thumbnail 设置为相对定位，并将食谱链接元素定位为绝对位置并与按钮对齐:

.thumbnail
{
  position:relative
}

.caption a
{
  position:absolute;
  bottom:1px
}