javascript jquery-match-height 不适用于第一行

jquery-match-height not working on first row

提问by Tomas Jacobsen

Im using jquery-match-heightplugin on my website.

我在我的网站上使用jquery-match-height插件。

I can't understand why the plugin does not work on the first row. It seems like the plugin is trying to output the style height, but it is empty on the first row. Second row is working fine.

我不明白为什么插件在第一行不起作用。看起来插件试图输出样式高度，但第一行是空的。第二排工作正常。

html

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

js

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

My bootply: view(does not seem to be working atm)

我的 bootply：查看（似乎无法在 atm 中工作）

My jsfiddle: view

我的 jsfiddle：查看

Anyone know how I can fix this?

有谁知道我该如何解决这个问题？

采纳答案by jeteon

Samus's answeris actually quite close but given that what you want is to:

Samus 的回答实际上非常接近，但考虑到您想要的是：

• match the height's of the .article-box .wellelements within each row
• have differing matched heights for each row

• 匹配.article-box .well每行中元素的高度
• 每行有不同的匹配高度

And the fact that the plugin simply makes the promise:

事实上，插件只是做出了承诺：

matchHeight makes the height of all selected elements exactly equal

matchHeight 使所有选定元素的高度完全相等

The solution is to select the elements within each row individually and apply the plugin to each collection separately like so:

解决方案是分别选择每一行中的元素并将插件分别应用于每个集合，如下所示：

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

You can see this at work in thisupdate to your jsFiddle. You'll notice the wells in the first row and the wells in the second one are a different height but the same within each row if you inspect them with your browser's dev tools.

您可以在jsFiddle 的此更新中看到这一点。如果您使用浏览器的开发工具检查它们，您会注意到第一行中的井和第二行中的井具有不同的高度，但在每一行中都是相同的。

回答by Samus

Default option is by row - https://github.com/liabru/jquery-match-height#options

默认选项是按行 - https://github.com/liabru/jquery-match-height#options

$('.article-box .well').matchHeight({ 
     byRow: 0
});

There you go. :)

你去吧。:)

回答by sunil gautam

You are applying matchHeight()on .article-box .wellwhich does not have any siblings.

你申请matchHeight()在.article-box .well其没有任何兄弟姐妹。

It should be

它应该是

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

Appply some background color to article-boxto see result.

应用一些背景颜色article-box以查看结果。

回答by Chadnaut

Try this Bootstrap equal-column-height CSS-only fix from Minimit instead:

试试这个来自 Minimit 的 Bootstrap equal-column-height CSS-only 修复：

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

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

You will also need this CSS on the wellsfor them to fill the now-equal height columns:

您还需要在 上使用此 CSSwells来填充现在等高的列：

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

回答by Jamie Barker

Scrap the plugin. Do it manually:

报废插件。手动执行：

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

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

回答by Tiji

I had the same issue where matchHeight seemed to be not working, however after debugging I realised that the very first element under the DIV that I was targeting had a negative margin top value. jQuery matchHeight has issues with negative margin values.

我遇到了同样的问题，其中 matchHeight 似乎不起作用，但是在调试之后我意识到我所针对的 DIV 下的第一个元素具有负的边距最高值。jQuery matchHeight 有负边距值的问题。

Just posting it here so that it could be of help to somebody who might be using negative margin values with matchHeight.

只需将其张贴在此处，以便对可能在 matchHeight 中使用负边距值的人有所帮助。