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;
}

這是一個小提琴