您如何在Zurb Foundation中出血列背景？

Question

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

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

更新：

我可以通过将列的子元素设置为margin-left: -9999px; padding-left: 9999px;来实现margin-left: -9999px; padding-left: 9999px; 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）。

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