容器流体中的Boostrap 4 Row与容器具有相同的填充

Question

我正在尝试使用bootstrap 4创建一个网站，但我遇到了问题。

A badly drawn image of what I want

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

在页眉和页脚中，一个容器用于菜单和页脚的内容，以便一切都是中心。

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

我还没知道从哪里开始，我尝试将容器覆盖在容器流体的顶部，但行没有匹配......

我已经创建了迄今为止我所拥有的代码笔。

的CSS：

.None

HTML

let mostRecentPredicate = HKQuery.predicateForSamples(withStart: startDate, end:endDate, options:[])

enter link description here

Answer 1

您可以使用CSS flexbox设置此样式。也许你应该看看它。以下是您绘制得很糟糕的图片的布局代码段示例。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;