展开时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; 
}