Jquery-match-height не работает в первой строке

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: просмотр

Кто-нибудь знает, как я могу это исправить?

ОТВЕТЫ

Ответ 1

Samus answer на самом деле довольно близко, но учитывая, что вы хотите:

  • соответствует высоте элементов .article-box .well в каждой строке
  • имеют разные согласованные высоты для каждой строки

И тот факт, что плагин просто делает обещание:

matchHeight делает высоту всех выбранных элементов ровно равными

Решение состоит в том, чтобы выбирать элементы внутри каждой строки индивидуально и применять плагин к каждой коллекции отдельно следующим образом:

$(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
    });
});

Вы можете увидеть это на работе в это обновление вашего jsFiddle. Вы заметите колодцы в первой строке, а лунки во втором - разные высоты, но то же самое в каждой строке, если вы проверите их с помощью инструментов вашего браузера dev.

Ответ 3

Попробуйте установить Исходное строковое выравнивание только для столбцов с шириной столбца только с минимальным значением:

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Вам также понадобится этот CSS для wells, чтобы они заполнили столбцы высоты с одинаковой высотой:

.well {
    display:inline-block;
    width:100%;
    height:100%;
    margin-top:0;
}

Ответ 4

Вы применяете matchHeight() на .article-box .well, который не имеет ни одного брата и сестры.

Это должно быть

$(function() {
   $('.article-box').matchHeight();
});

Чтобы увидеть результат, используйте цвет фона для article-box.

Ответ 5

Сбросьте плагин. Сделайте это вручную:

http://jsfiddle.net/9ru53a28/16/

$(function() {
    $('.row').each(function() {
        var intHeight = 0;
        $(this).find('.well').each(function() {
            if ($(this).outerHeight() > intHeight) {
               intHeight = $(this).outerHeight()
            }
        });
        $(this).find('.well').each(function() {
            $(this).outerHeight(intHeight)
        });
    });
});

Ответ 6

У меня была такая же проблема, когда matchHeight, похоже, не работал, но после отладки я понял, что самый первый элемент под DIV, на который я нацелился, имел отрицательное значение верхнего предела. jQuery matchHeight имеет проблемы с отрицательными значениями маржи.

Просто разместите его здесь, чтобы он мог помочь кому-то, кто может использовать отрицательные значения маржи в matchHeight.