全宽背景颜色与居中容器

Question

我正在使用Bootstrap V4，我有一个container类，其中有2列红色和绿色col-md-6位于页面中间。

但是我想在左侧添加红色背景，在其右侧添加绿色，填充100％宽度。

我的HTML

    <section style="background-color:green">
      <div class="container" >
        <div class="row">
          <div class="col-md-6">
            <section>
              <div id="hvc-dyk">
                <header>
                  <h1>Did you know...</h1>
                  <p id="dyk-large">80</p>
                  <p>
                  Lorum ipsum
                  </p>
                </header>
              </div>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              This is hre
            </section>
          </div>
        </div>
      </div>
    </section>

Answer 1

您可以使用线性渐变作为背景来模拟：

body {
    background: -webkit-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: -moz-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: -o-linear-gradient(left, #f00 50%, #27a31a 50%);
    background: linear-gradient(to right, #f00 50%, #27a31a 50%);
}   

示例：https://jsfiddle.net/cqq5e8t1/1/