如何将Bootstrap中的列高设置为父高度的100%

时间:2016-08-07 11:50:01

标签: html css twitter-bootstrap

我一直在修补我的代码。而且我一直很难设置引导柱的高度

  

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。我还没有找到任何答案。任何帮助将不胜感激。谢谢!

0 个答案:

没有答案