使Bootstrap面板具有相等的高度

我有四個boostrap .panel s在每個內有不同的內容。因此，每個面板都有不同的高度。我怎樣才能將每個面板的高度設置爲與最大高度的面板相同？所有面板都有相同的高度？使Bootstrap面板具有相等的高度

<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>

來源

2016-10-31 Matt

的[我如何保持兩個div是並排同方可能的複製高度？]（http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height） – KAD

使用每個循環&一個全局變量來獲得最大高度

var maxH = 0; 

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

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

演示：https://jsfiddle.net/5hfxmpjw/

來源

2016-10-31 10:27:33 madalinivascu

我放置該腳本與一個開始''標籤，它不起作用。 – Matt

將它包裝在文檔準備好聲明中 – madalinivascu

我做過。確定它在'$（document）.ready（function（）{'和'}）之間;' – Matt

使Bootstrap面板具有相等的高度

回答

相關問題