如何使Bootstrap行背景颜色填充页面的其余部分？

当我们用引导的网页时，我们使用我们放入容器行，因此，如果做到这一点，2行，如何让2nde一个填满整个页面？如何使Bootstrap行背景颜色填充页面的其余部分？

即如果我有那些2行：

如何让2nde一个（蓝色）以填充页面的休息吗？

谢谢

的HTML代码是：

<body> 

<div class="container-fluid"> 

    <div class="row row1"> 

     <br> 

    </div> 

    <div class="row row2"> 

     <br> 

    </div> 

</div> 

</body>

而CSS是：

.row1{ 
    background-color: orange; 
} 

.row2{ 
    background-color: blue; 
}

PS：我只是想变换的行属性，而不能使用一个用身体的背景颜色对页面的其余部分进行排序和着色。

来源

2017-05-05 Henri

放入'.container'的第一个和第二个另一种在'.container-fluid'？你也需要发布你的代码。 –

@MichaelCoker我只是想你的解决方案不起作用 – Henri

你能澄清的问题/问题是什么？这不是很清楚。 – ZimSystem

您可以使用柔性的布局来实现你想要什么。下面是一个例子：

* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
.row1{ 
 
    background-color: orange; 
 
} 
 

 
.row2{ 
 
    background-color: blue; 
 
} 
 
.container-fluid { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
.row:last-child { 
 
    flex: 1; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row row1"> 
 

 
     <br> 
 

 
    </div> 
 

 
    <div class="row row2"> 
 

 
     <br> 
 

 
    </div> 
 

 
</div>

甲jsfiddle也为参考制备。

一些解释关键代码：

display: flex;：使用的display: flex内部项目柔布局。
flex-direction: column;：垂直排列.row秒。
flex: 1;：使.container-fluid的最后一个子（.row2你的情况）增长/自动收缩。

来源

2017-05-06 02:34:56 shaochuancs

如何使Bootstrap行背景颜色填充页面的其余部分？

回答

相关问题