Bootstrap容器填充颜色

Question

我使用bootstrap创建了以下模板：

我使用1200px容器作为蓝色/灰色容器，图像为1600px。

我想用蓝色填充蓝色容器（400px）的左侧，灰色容器（800px）的右侧用灰色填充，但填充物不能超过1600px。基本上它必须与2个容器上方的图片相匹配。

以下是我想要实现的目标：

内容必须保持在1200像素范围内，但背景颜色必须填充到1600像素。

如果我将模板的大小调整为1200像素，它应该如下图所示。

你们有个想法我怎么能做到这一点？我尝试的每个解决方案都会解决掉自举容器的问题，当我调整大小时内容会变得不合适，这是我想避免的。

谢谢！

编辑：如果需要，这是一个bootply示例：http://www.bootply.com/APwOkhCfQD

Answer 1

您当前的问题是图片被硬编码为1600px宽度。您有两种选择：

让你的标题在宽度上完全流畅，并删除你目前正在进行的双重container包裹：

<div class="container-fluid">
    <div class="container"><!-- delete this -->

或者将container班级宽度更改为1600：

.container {
    width: 1600px;
}

http://www.bootply.com/q35ERYfN7A

<强>更新

您还可以通过以下方式获得完整的背景色效果：

.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}

Answer 2

在.service-container和.commitment-container上使用伪类。绝对定位它们，并将它们放大到200px宽和100％高度。添加背景颜色，瞧！

示例：

.service-container::before {
  content: "";
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

Answer 3

之前我回答了very similar question。

将蓝色背景颜色放在container的外包装上，并在右侧添加一个带有浅灰色背景的伪元素。

.light-gray-background:before {
    right: -999em;
    background: #f2f1eb;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

演示：http://www.codeply.com/go/Cdnjz5CH5M