jquery-match-height non funziona sulla prima riga

Question

Im utilizzando il plug-in jquery-match-height sul mio sito web.

Non riesco a capire perché il plug-in non funzioni sulla prima riga. Sembra che il plugin stia cercando di mostrare l'altezza dello stile, ma è vuoto sulla prima riga. La seconda fila sta funzionando bene.

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

mio bootply: view (non sembra funzionare atm)

mio jsfiddle: view

Qualcuno sa come posso risolvere questo?

Answer 1

Samus di answer è in realtà molto vicino, ma, dato che ciò che si vuole è quello di:

• partita l'altezza del degli .article-box .well elementi all'interno di ogni riga
• avere altezze diverse per ogni riga

E il fatto che il plug fa semplicemente la promessa:

matchHeight rende l'altezza di tutti gli elementi selezionati esattamente uguali

La soluzione consiste nel selezionare gli elementi all'interno di ogni fila singolarmente e applicare il plug ad ogni collezione a parte in questo modo:

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

potete vedere questo al lavoro in this aggiornamento al jsFiddle. Noterai i pozzetti nella prima fila e i pozzetti nella seconda hanno un'altezza diversa ma lo stesso all'interno di ogni fila se li controlli con gli strumenti di sviluppo del tuo browser.

Answer 2

Prova questo pari-colonna-altezza CSS-only Bootstrap fix da Minimit invece:

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

Sarà inoltre necessario questo CSS sul wells per loro di riempire le colonne ormai uguale altezza:

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

Answer 3

opzione di default è per riga - https://github.com/liabru/jquery-match-height#options

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

Ecco qui. :)

Answer 4

Stai applicando matchHeight() su .article-box .well che non ha fratelli.

Dovrebbe essere

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

Appply po 'di colore di sfondo per article-box per vedere risultato.

Answer 5

Elimina il plug-in.Farlo manualmente:

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

Ho avuto lo stesso problema in cui matchHeight sembrava non funzionare, tuttavia dopo il debug mi sono reso conto che il primo elemento sotto il DIV che avevo scelto come obiettivo aveva un valore marginale del margine negativo. jQuery matchHeight ha problemi con i valori dei margini negativi.

Pubblicarlo qui in modo che possa essere di aiuto a qualcuno che potrebbe utilizzare valori di margine negativo con matchHeight.