你如何在Zurb基金会流血柱背景？

Question

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

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

更新

我能够通过将列的子元素设置为margin-left: -9999px; padding-left: 9999px;来实现此目的。但我仍然想知道是否有更合适的方法。

更新

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

Answer 1

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

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

请参阅Column Bleeding的实际操作。有关详细信息，请参阅this article（感谢@Paulie_D）。

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