css - CSS：打破类似 Bootstrap 的网格系统

Question

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

任何人都知道任何好的，干净的例子吗？

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

请参阅我需要的屏幕截图。紫色是向左扩展的背景，白色是页面背景。黄色是 12 列网格。

标签： cssbootstrap-4

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/