Zurb Foundation 5 - 行填充/边距

Question

我正在尝试为我的行创建背景颜色，但是当我设置背景颜色时，它会延伸到我的列的常规宽度。 然后我尝试使用填充使行变小，这有效，但使列更小。 我需要以某种方式删除粉红色区域，只保留红色背景，并保持列均匀。

有什么想法吗？

<!-- When applying the padding, the columns background turns OK. However, the
columns themselves aren't as even as "normal" columns without padding -->

<div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; ">
        <div class="large-3 columns" style="background-color: red;">
        text1
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text2
        </div>
         <div class="large-3 columns" style="background-color: red;">
        text3
        </div>
        <div class="large-3 columns" style="background-color: red;">
        text4
        </div>
</div>

<!-- The background of the columns is same for all of the columns, and it's 
bigger than the image because of the padding -->
<div class="row">
    <div class="large-3 columns" style="background-color: teal;">
        text1
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text2
    </div>
         <div class="large-3 columns" style="background-color: teal;">
        text3
    </div>
        <div class="large-3 columns" style="background-color: teal;">
        text4
    </div>
</div>
<!-- This image has a padding in the column, so it's not the whole width of 
the row -->
<div class="row">
    <div class="large-12 columns" style="background-color: grey;">
        <img alt="slide image" src="http://placehold.it/1000x15">
    </div>
</div>

Answer 1

一种方法是删除列填充，因为这会导致您在行div中看到粉红色背景并为行添加边距以使它们对齐。

.columns{
     padding-left: 0rem;
    padding-right: 0rem;
}
.row{
     margin-left: 0.83333rem;
    margin-right: 0.83333rem;
    width:auto;
}

这是Fiddle