我一直在修补我的代码。而且我一直很难设置引导柱的高度
col-xs-4,col-sm-4
填充div父母的100%高度。
以下是 HTML代码
<div class="cover">
<div class="cover-text">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4">
<h1>Mission</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="col-xs-4 col-sm-4">
<h1>Services</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="col-xs-4 col-sm-4">
<h1>People</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div> <!-- End of row -->
</div> <!-- End of container-fluid -->
</div> <!-- End of cover=-text -->
</div> <!-- End of cover -->
这是 CSS
html,
body,
.cover {
height: 100%;
}
.cover {
background: url('../img/couchfriends.jpg') top left no-repeat;
background-size: cover;
display: table;
width: 100%;
/*padding: 10% 20%;*/
box-shadow: inset 0 0 100px #000;
}
.cover-text {
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
我曾尝试为列的父级更改CSS。我还没有找到任何答案。任何帮助将不胜感激。谢谢!