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>