Bootstrap 容器用颜色填充侧面答案

【问题标题】：Bootstrap container fill sides with colorsBootstrap 容器用颜色填充侧面
【发布时间】：2019-11-13 19:46:56
【问题描述】：

我有以下使用引导程序的模板：

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

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

这是我想要实现的目标：

内容必须保持在 1200px 以内，但背景颜色必须填充到 1600px。

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

你们知道我怎么能做到这一点吗？我尝试的每一个解决方案都解决了放弃引导容器和调整大小时内容脱节的问题，这是我想避免的。

谢谢！

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

【问题讨论】：

我没看懂你到底想做什么，所以问一下：你想要的是蓝灰色部分和logo的宽度大小一样吗？
这是我想要实现的不可调整大小的示例：bootply.com/cTUFFpMZxf
也许这会有所帮助：.container 类的宽度必须为 100%，最大宽度为 1600 像素。这将防止容器变得比标题大，但它也可以调整大小。检查一下并告诉我这是否有效
不幸的是，这不起作用，因为 2 个容器（蓝色和灰色）将被拉伸到 1600 像素。（例如：bootply.com/k4sOVUuBfF）。我需要将蓝色和灰色容器内的内容放在 1200px 内。

标签： css twitter-bootstrap

【解决方案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%);}

【讨论】：

我编辑了我的问题，因为我认为它相当混乱。我希望现在已经足够清楚了，谢谢！
它在 IE 上都可以工作（不出所料），但这是另一个问题，谢谢！
ie有自己的渐变前缀，这个生成器非常好用：colorzilla.com/gradient-editor

【解决方案2】：

在 .service-container 和 .commitment-container 上使用伪类。绝对定位它们并将它们的大小设置为 200 像素宽和 100% 高度。添加背景颜色，瞧！

例子：

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

【讨论】：

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

【讨论】：