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

Question

What is the Zurb Foundation 4 way of extending the background of a column to the edge of the screen, while maintaining responsiveness?

As an example, see the blue column in the illustration below.

Update:

I was able to achieve this by setting the column's child element to margin-left: -9999px; padding-left: 9999px; margin-left: -9999px; padding-left: 9999px; . But I still wonder if there's a more proper way of doing it.

Update:

I was able to come up with a better solution, involving pseudo elements, see below. Thanks @Paulie_D for the tip!

Answer 1

It looks like the best option is to use pseudo elements . The following CSS code applies bleeding to the left-side column.

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

See Column Bleeding in action. For more information, see this article (thanks @Paulie_D).

I'd be happy to select a better solution, if anyone has any.