Boostrap 4容器流體內的行與容器具有相同的填充

Question

我試圖創建一個使用引導程序4的網站，並且遇到了問題。

A badly drawn image of what I want

的頁面是一個conatainer流體的頁眉和頁腳的背景應該擴散到頁面邊緣。

在頁眉和頁腳中，一個容器用於菜單和頁腳的東西，這樣所有東西都是中心的。

頁眉和頁腳之間的爭用應該以類似的方式工作（背景伸展到邊緣）但是，我使用的是列，所以一邊可能是藍色，另一邊是白色。我希望這些行的內容符合頁眉頁腳（頁眉中菜單的左邊緣與文本位置相同）

我不知道從哪裏開始，我嘗試過覆蓋容器頂部的容器液體，但行不匹配。

我已創建此代碼筆到目前爲止。

CSS：

.rowoverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
    bottom: 0; 
    right: 0; 
    height: 100%; 
} 

HTML

<div class="container-fluid homepage-text-plugin"> 

    <div class="row rowoverlay"> 
     <div class="col-md-12 col-lg-5" style="background-color: green;"></div> 
     <div class="col-md-12 col-lg-7" style="background-color: red;"> 

     </div> 

    </div> 

    <div class="container "> 

     <div class="row"> 
      <div class="col-md-12 col-lg-4 " style="background-color: blue;"> 
       A text block 
      </div> 
      <div class="col-md-12 col-lg-7" style="background-color: yellow;"> 
       More text<p> 
      </div> 

     </div> 
    </div> 

</div> 

enter link description here

Answer 1

你可以用CSS Flexbox的風格這一點。也許你應該看看它。下面是一個代碼片段的示例，從你的糟糕的繪製圖像的佈局。

.row-example { 
 
    display: flex; 
 
    background: red; 
 
    width: 100%; 
 
} 
 

 
.row-1-left { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 

 
.row-1-center { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: green; 
 
    justify-content: center; 
 
} 
 

 
.row-1-right { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
.row-2-left { 
 
    width: 1000px; 
 
    height: 200px; 
 
    background: yellow; 
 
} 
 

 
.row-2-right { 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 200px; 
 
    background: orange; 
 
} 
 

 
.row-3-left { 
 
    width: 1400px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
.row-3-right { 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.row-4-left { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 

 
.row-4-center { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: green; 
 
    justify-content: center; 
 
} 
 

 
.row-4-right { 
 
    width: 300px; 
 
    height: 50px; 
 
    background: yellow; 
 
}

<div class="container-fluid homepage-text-plugin"> 
 
    <div class="row-example"> 
 
    <div class="row-1-left"></div> 
 

 
    <div class="row-1-center"> 
 
     <p>Header container</p> 
 
    </div> 
 

 
    <div class="row-1-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-2-left"></div> 
 

 
    <div class="row-2-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-3-left"></div> 
 

 
    <div class="row-3-right"></div> 
 
    </div> 
 

 
    <div class="row-example"> 
 
    <div class="row-4-left"></div> 
 

 
    <div class="row-4-center"></div> 
 

 
    <div class="row-4-right"></div> 
 
    </div> 
 
</div>