Zurb Foundation 5 - Zeile padding/margin

Ich versuche zu erstellen, die eine Hintergrundfarbe für meine Reihe, aber wenn ich eine Hintergrundfarbe eingestellt ist, es erstreckt sich über das regelmäßige Breite meiner Spalten.
Dann habe ich versucht, die Zeile kleiner mit Polsterung, das funktioniert, aber macht das Spalten kleiner.
Ich muss ja irgendwie entfernen Sie die rosa Fläche, halten Sie nur den roten hintergrund, UND halten Sie die Spalten selbst.

Irgendwelche Ideen?

Zurb Foundation 5 - Zeile padding/margin

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

InformationsquelleAutor Yossi | 2014-06-27

Schreibe einen Kommentar