居中容器的全宽背景颜色答案

【问题标题】：Full width background color with centered container居中容器的全宽背景颜色
【发布时间】：2016-05-27 20:41:00
【问题描述】：

我正在使用 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>

【问题讨论】：

使用 2 种颜色将背景图像设为线性渐变，每种颜色的宽度为 50%...
尝试在body 元素上使用渐变，该元素的中心从红色到绿色的过渡非常紧密。
是的，我正在考虑创建一个人造背景，但认为可能有一种 Bootstrap 方法可以做到这一点？
引导方式是使用 HTML/CSS 中已有的任何内容，除非这很复杂并且引导程序有更简单的解决方案。

标签： css twitter-bootstrap

【解决方案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/

【讨论】：