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.

Any ideas?

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

回答1:

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

Here is a Fiddle

来源：https://stackoverflow.com/questions/24445475/zurb-foundation-5-row-padding-margin

标签

html5

css3

zurb-foundation