Html 容器流体内的4排增压器与容器具有相同的衬垫

我试图创建一个网站使用引导4，我遇到了一个问题

页面是一个conatainer流体，因为页眉和页脚背景应扩展到页面边缘

在页眉和页脚中，一个容器用于菜单和页脚内容，因此所有内容都是中心内容

页眉和页脚之间的内容应该以类似的方式工作（背景延伸到边缘），但是我使用的是列，因此在一边它可能是蓝色的，而另一边是白色的。我希望这些行的内容与页眉页脚一致（页眉中菜单的左边缘与文本位于同一位置）

我不知道从哪里开始，我试着将一个容器覆盖在容器液体的顶部，但行数不匹配

我已经用我目前所拥有的创造了这支代码笔

css:

HTML

文本块
更多文本

---

您可以使用CSS flexbox为其设置样式。也许你应该调查一下。下面是一个来自绘制糟糕的图像lol的布局的代码片段示例

。行示例{
显示器：flex；
背景：红色；
宽度：100%；
}
.第1排-左{
宽度：300px；
高度：100px；
背景：蓝色；
}
.第1排-中间{
显示器：flex；
宽度：100%；
高度：100px；
背景：绿色；
证明内容：中心；
}
.第1排-右侧{
宽度：300px；
高度：100px；
背景：黄色；
}
.第2排-左{
宽度：1000px；
高度：200px；
背景：黄色；
}
.第2排-右侧{
证明内容：中心；
宽度：100%；
高度：200px；
背景：橙色；
}
.第3排-左{
宽度：1400px；
高度：200px；
背景：红色；
}
.第3排-右侧{
证明内容：中心；
宽度：100%；
高度：200px；
背景：蓝色；
}
.第4排-左侧{
宽度：300px；
高度：50px；
背景：蓝色；
}
.第4排-中心{
宽度：100%；
高度：50px；
背景：绿色；
证明内容：中心；
}
.第4排-右侧{
宽度：300px；
高度：50px；
背景：黄色；
}

收割台容器

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

<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>