Zurb Foundation 5 - 行填充/边距 [英] Zurb Foundation 5 - Row padding/margin

问题描述

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

I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns. Then I tried making the row smaller with padding, which works, but makes the columns smaller. I need to somehow remove the pink area, keep only the red background, AND keep the columns even.

任何想法？

<!-- 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>

推荐答案

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

One way is to remove column padding as this causes you to see the pink background in the row div and add margin for row to have them aligned.

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

这是小提琴

这篇关于Zurb Foundation 5 - 行填充/边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！