固定内柱的 Bootstrap .container-fluid

Question

在引导程序中，将 2 列放入非流体容器中

.col-xs-9 / .col-xs-3

如何使这些列的背景与左右边距全宽？
我做了这个例子 404：http://codepen.io/iamandrewluca/pen/VmOJVJ
但是width: 75vw; 和width: 25vw; 并没有像我想象的那样工作。
我该如何解决这个问题？

想要的结果：
* 橙色 - 容器
* 绿色 - 左栏
* 蓝色 - 右栏
* 深绿色 - 左背景
* 深蓝色 - 右背景

我可以添加

body {
    overflow: hidden;
}

并给两列width: 100vw;，但背景图片内容会出现在外面。

Answer 1

通过手动使用密集的calc 解决first-of-type 和last-of-type 的宽度和边距。
例如：https://codepen.io/iamandrewluca/full/zzWrXe/
也许我会创建一个 mixin 来为所有带有偏移、拉取、推送和所有其他内容的列生成这个

更新：更新到 Bootstrap 4，修复了可滚动内容的一些问题

Answer 2

您的背景图片位于具有定义宽度的容器内。您需要使容器的宽度为 100vw，然后左列为 75vw，右列为 25vw。这样你的背景图片就会覆盖整个屏幕。