Im использует 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. 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. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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></h4>
<p>Lorem ipsum dolor sit amet, consectetuer. <a href="#">More</a></p>
</div>
</div>
</div><!--/ last-row-->
</div>
JS
$(function() {
$('.article-box .well').matchHeight();
});
My bootply: посмотреть (кажется, не работает atm)
Мой jsfiddle: просмотр
Кто-нибудь знает, как я могу это исправить?