html - 您如何在 Zurb Foundation 中为列背景流血？

Question

Zurb Foundation 4 将列的背景扩展到屏幕边缘的方法是什么，同时保持响应能力？

例如，请参见下图中的蓝色列。

更新：

我可以通过将列的子元素设置为margin-left: -9999px; padding-left: 9999px;. 但我仍然想知道是否有更合适的方法。

更新：

我能够想出一个更好的解决方案，包括伪元素，见下文。感谢@Paulie_D 的提示！

Answer 1

看起来最好的选择是使用伪元素。以下 CSS 代码将出血应用于左侧列。

.column { position: relative; }
.column:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    right: 100%;
}

请参阅柱流血实际操作。有关更多信息，请参阅本文（感谢 @Paulie_D）。

如果有人有的话，我很乐意选择更好的解决方案。