jquery-match-height funktioniert nicht in der ersten Zeile

Question

Im mit jquery-match-height Plugin auf meiner Website.

Ich kann nicht verstehen, warum das Plugin nicht in der ersten Zeile funktioniert. Es scheint, als ob das Plugin versucht, die Stilhöhe auszugeben, aber es ist in der ersten Zeile leer. Die zweite Reihe funktioniert gut.

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

Mein bootply: view (scheint nicht atm zu arbeiten)

Mein jsfiddle: view

Wer weiß, wie ich das beheben kann?

Answer 1

Samus 'answer eigentlich ganz in der Nähe ist, aber da es das, was Sie wollen, ist zu:

• Spiel der Höhe des der .article-box .well Elemente innerhalb jeder Reihe
• haben unterschiedliche übereinstimmende Höhen für jede Reihe

Und die Tatsache, dass das Plugin einfach das Versprechen macht:

matchHeight macht die Höhe aller ausgewählten Elemente genau gleich

innerhalb jeder Reihe

Die Lösung ist individuell wählen die Elemente und das Plugin anwenden zu jeder Kollektion separat wie folgt:

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

Sie können bei der Arbeit in this Update auf Ihrem jsFiddle sehen dies. Sie werden feststellen, dass die Vertiefungen in der ersten Reihe und die Vertiefungen in der zweiten Reihe eine andere Höhe haben, aber in jeder Reihe gleich sind, wenn Sie sie mit den Tools Ihres Browsers überprüfen.

Answer 2

Versuchen Sie, diese Bootstrap equal-Spalte-height CSS-nur aus Minimit beheben statt:

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

Sie müssen auch diese CSS auf der wells für sie, die nun die gleiche Höhe Spalten füllen:

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

Answer 3

Standardoption ist für Zeile - https://github.com/liabru/jquery-match-height#options

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

Da gehen Sie. :)

Answer 4

Sie bewerben matchHeight() auf .article-box .well, die keine Geschwister hat.

Es sollte

sein

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

Appply einige Hintergrundfarbe zu article-box Ergebnis zu sehen.

Answer 5

Verschrotten Sie das Plugin.Tun Sie es manuell:

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

Answer 6

Ich hatte das gleiche Problem, wo MatchHeight schien nicht zu arbeiten, aber nach dem Debuggen erkannte ich, dass das allererste Element unter der DIV, die ich anvisierte hatte einen negativen Rand Top-Wert. jQuery MatchHeight hat Probleme mit negativen Randwerten.

Einfach hier posten, damit es jemandem helfen könnte, der negative margin-Werte mit matchHeight verwenden könnte.