展開時div的高度相同

Question

我經常遇到一個問題，它需要很長時間才能解決。我希望底部的引導框具有相同的高度。我試圖在我的CSS中設置px的高度，但是這會把所有東西都弄亂。我也試着用％來設置它，但那不起作用。那麼如何通過propper方式來設置高度，所以所有的框都顯示爲相同的高度，如果我添加一些文本，會使框改變高度？

Portfolio

HTML（剛插入1列在這裏，這樣的代碼不填這麼多）

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"); 
 
.panel-pricing { 
 
    -moz-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    -webkit-transition: all .3s ease; 
 
} 
 
h3.panel-pricing { 
 
    color: #999; 
 
    font-size: 20px; 
 
} 
 
.panel-pricing .panel-heading { 
 
    padding: 20px 10px; 
 
} 
 
.panel-pricing .panel-heading .fa { 
 
    margin-top: 10px; 
 
    font-size: 58px; 
 
} 
 
.panel-pricing .list-group-item { 
 
    color: #777777; 
 
    border-bottom: 1px solid rgba(250, 250, 250, 0.5); 
 
} 
 
.panel-pricing .list-group-item:last-child { 
 
    border-bottom-right-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
} 
 
.panel-pricing .list-group-item:first-child { 
 
    border-top-right-radius: 0px; 
 
    border-top-left-radius: 0px; 
 
} 
 
.panel-pricing .panel-body { 
 
    background-color: #f0f0f0; 
 
    font-size: 40px; 
 
    color: #777777; 
 
    padding: 20px; 
 
    margin: 0px; 
 
}

<section id="plans"> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
     <!-- item --> 
 
     <div class="col-md-4 text-center"> 
 
     <div class="panel panel-danger panel-pricing"> 
 
      <div class="panel-heading"> 
 
      <i class="fa fa-money" aria-hidden="true"></i> 
 
      <h3>Plan 1</h3> 
 
      </div> 
 
      <div class="panel-body text-center"> 
 
      <p><strong>$100/Month</strong> 
 
      </p> 
 
      </div> 
 
      <ul class="list-group text-center"> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li> 
 
      <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li> 
 
      </ul> 
 
      <div class="panel-footer"> 
 
      <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

更新CSS並添加min-height

.panel-pricing .panel-body { 
    background-color: #f0f0f0; 
    font-size: 40px; 
    color: #777777; 
    padding: 20px; 
    margin: 0px; 
    min-height: 115px; 
}