CSS：打破类似 Bootstrap 的网格系统 [重复]

Question

我需要构建一个模板，它的左侧背景（与页面背景颜色不同）一直延伸到左侧页面边缘，并且仍然在 8 of 12 之内引导列 (container>row>col-8)。然后右边的4列没有背景。所有这些美都需要响应式引导列（在移动屏幕上相互堆叠）。我不能使用流体容器（100% 宽度），因为内容需要在 12 列内并且在左侧有填充。

有人知道这方面的任何好的、干净的例子吗？

我不喜欢使用 ::before 伪元素，但如果这是唯一的方法，那么我将不得不忍受它。

查看我需要的截图。紫色是向左扩展的背景，白色是页面背景。黄色是 12 列网格。

Answer 1

会不会像重置容器左边的边距一样简单？

<div class="container ml-0">
    <div class="row">
        <div class="col-sm-8">8 Cols</div>
        <div class="col-sm-4">4 Cols</div>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/o4vsftpy/28/

Answer 2

您可以使用css 渐变属性。