0
我經常遇到一個問題,它需要很長時間才能解決。我希望底部的引導框具有相同的高度。我試圖在我的CSS中設置px的高度,但是這會把所有東西都弄亂。我也試着用%來設置它,但那不起作用。那麼如何通過propper方式來設置高度,所以所有的框都顯示爲相同的高度,如果我添加一些文本,會使框改變高度?展開時div的高度相同
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>
很酷,做了這項工作。萬分感謝。我可以先在10分鐘內接受你的回答。你能解釋一下爲什麼你在這堂課上準確地設置它,所以我明白了,直到下一次? – KrMa