Bootstrap Panels haben gleiche Höhe

Question

Ich habe vier Boostrap .panel s mit unterschiedlichen Inhalten in jedem einzelnen. Somit hat jede Platte eine unterschiedliche Höhe. Wie kann ich die Höhe jeder Platte so einstellen, dass sie der Platte mit der größten Höhe entspricht? Damit alle Paneele die gleiche Höhe haben?

<div class="promo"> 
    <div class="container"> 


     <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       <div class="panel panel-default"> 
        <div class="panel-heading panel-heading-custom">NEW OPENING</div> 
         <div class="panel-body"> 
          <img src="images/img.gif" class="img-circle center-block margins" /> 
          <p>To celebrate our new opening, we have sales on many of your favorite items.</p> 
         </div> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       <div class="panel panel-default"> 
        <div class="panel-heading panel-heading-custom">QUALITY ASSURRED</div> 
         <div class="panel-body"> 
          <img src="images/img2.gif" class="img-circle center-block margins" /> 
          <p>Our products come with a five-year warranty.</p> 
         </div> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       <div class="panel panel-default" id="tallest"> 
        <div class="panel-heading panel-heading-custom">IN-STORE SPECIAL</div> 
         <div class="panel-body"> 
          <img src="images/img3.gif" class="img-circle center-block margins" /> 
          <p>Take advantage of our new in-store special. You won't be disappointed to find the greatest deals. Now when you buy two or more products, you can get a third product of similar value for free. </p> 
         </div> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       <div class="panel panel-default"> 
        <div class="panel-heading panel-heading-custom">FREE CONSULTATIONS</div> 
         <div class="panel-body"> 
          <img src="images/img4.gif" class="img-circle center-block margins" /> 
          <p>If you are by our area, we can pay you a visit or you can stop by our office--consultations are entirely free for local members.</p> 
         </div> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

Answer 1

Verwenden Sie eine jede Schleife & eine globale Variable die größte Höhe zu bekommen

var maxH = 0; 

$('.panel').each(function(){ 
if($(this).height() > maxH) { 
    maxH = $(this).height(); 
} 
}); 

$('.panel').height(maxH); 

Demo: https://jsfiddle.net/5hfxmpjw/