我在我的网站上使用
jquery-match-height插件.
我不明白为什么插件在第一行不起作用.看起来插件试图输出样式高度,但第一行为空.第二排工作正常
HTML
<div class="container">
<div class="row article-Box-list">
<div class="col-xs-12 col-md-8 article-Box">
<a href="#"><img src="http://dummyimage.com/768x410/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h2><a href="#">Lorem ipsum dolor sit amet,consectetuer adipiscing elit</a></h2>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-Box">
<a href="#"><img src="http://dummyimage.com/768x853/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet,consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
</div>
</div>
</div><!-- /first-row-->
<div class="row article-Box-list">
<div class="col-xs-12 col-md-4 article-Box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet,consectetuer.</a></h4>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. <a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-Box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet,consectetuer.</a></h4>
<p class="ingress">Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Lorem ipsum dolor sit amet,consectetuer adipiscing elit.<a href="#">More</a></p>
</div>
</div>
<div class="col-xs-12 col-md-4 article-Box">
<a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>
<div class="well well-white">
<h4><a href="#">Lorem ipsum dolor sit amet,consectetuer. <a href="#">More</a></p>
</div>
</div>
</div><!--/ last-row-->
</div>
JS
$(function() {
$('.article-Box .well').matchHeight();
});
我的bootply：view(似乎没有工作atm)
我的jsfiddle：view
任何人都知道如何解决这个问题？
解决方法
Samus的
answer实际上是相当接近的,但是你想要的是：
>匹配每行内的.article-Box .well元素的高度
>每排都有不同匹配的高度
事实上,插件只是承诺：
matchHeight makes the height of all selected elements exactly equal
解决方案是单独选择每行中的元素,并将插件分别应用于每个集合,如下所示：
$(function() {
$('.row').each(function(i,elem) {
$(elem)
.find('.article-Box .well') // Only children of this row
.matchHeight({byRow: false}); // Row detection gets confused so disable it
});
});
你可以在this的工作中看到这个更新到你的jsFiddle.您将注意到第一排中的井,而第二列中的井是不同的高度,但是如果您使用浏览器的开发工具检查它们,则在每一行中相同.
