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

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

Answer 2

使用calc和first-of-type的宽度和边距强化last-of-type手动解决。
例如：https://codepen.io/iamandrewluca/full/zzWrXe/
也许我会创建一个mixin来为所有列生成这个，包括偏移，拉动，推动和所有其他东西

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