我在首页有三个.well
元素,但我不想填充内容来确保它们在每个屏幕上都正确大小。理想情况下,我希望有一个CSS解决方案,可以指定它们的高度和宽度匹配,无论在哪个屏幕上显示(并且当窗口缩小时,它们会正确堆叠)。
/* CSS used here will be applied after bootstrap.css */
#benefit-box-1 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-box-3 {
padding-top: 1em;
display: inline-block;
text-align: center;
float: left;
}
#benefit-row-2 {
margin-top: 1px;
}
.icon-div {
display:inline-block;
text-align: centre;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.icon-div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="benefit-row">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-users fa-4x"></i>
<h1>Collaborate in your sales meetings.</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-map-signs fa-4x"></i>
<h1>Direct your team to the best deals</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-filter fa-4x"></i>
<h1>Trust your pipeline forecast</h1>
</div>
</div>
</div>
</div>
<div class="row" id="benefit-row-2">
<div class="col-md-4" id="benefit-box-1">
<div class="well">
<div class="icon-div">
<i class="fa fa-bullseye fa-4x"></i>
<h1>Helps you target the right contacts</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box">
<div class="well">
<div class="icon-div">
<i class="fa fa-graduation-cap fa-4x"></i>
<h1>In-built sales training</h1>
</div>
</div>
</div>
<div class="col-md-4" id="benefit-box-3">
<div class="well">
<div class="icon-div">
<i class="fa fa-line-chart fa-4x"></i>
<h1>Smash your sales targets</h1>
</div>
</div>
</div>
</div>
</div>
.well
的高度和宽度都相同。如果其中一个有更多内容,其余的将会留出空间。对吗?您想让它们保持在不同的行中吗? - Mosh Feu