如何使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行背景顏色填充頁面的其餘部分？

回答

相關問題