填充網格列布局內的內容

Question

我使用Zurb Foundation框架構建前端（http://foundation.zurb.com/docs/grid.php），並且創建了我的基本佈局，沒有問題。

我想知道的是如何填充列內的內容？所有的內容都按照你的想法排列在左側，但是我看不到如何在沒有定製網格佈局標記的情況下創建填充，或者無處不在創建大量的包裝。

例如，標記

<div class="container"> 
    <div class="row"> 
    <div class="eight columns customise-the-grid"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
    </div> 
    <div class="four columns"> 
     <div class="or-create-a-wrapper"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
     </div> 
    </div> 
    </div> 
</div> 

一些CSS來說明

.customise-the-grid{ 
    padding: 10px; 
} 
.or-create-a-wrapper{ 
    padding: 10px; 
} 

Answer 1

是的，這一直是網格系統和非流體設計的問題。不要嘲笑他們，他們肯定對流體設計有其優勢，但他們很難與之合作。

我會做的是在你希望填充的元素內的元素上設置一個邊距。如果這是有道理的。

<div class="four columns"> 
    <div class="or-create-a-wrapper"><!-- margin here --> 
    <p>My main content</p> 
    <ul><li>My item</li></ul> 
    <!-- other various content --> 
    </div> 
</div> 

OR

<div class="four columns"> 
    <div class="or-create-a-wrapper"> 
    <div class="another-div-yay"><!-- margin here --> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     </div> 
    <!-- other various content --> 
    </div> 
</div> 

Answer 2

爲什麼不添加填充或保證金的子元素？像

.columns * {margin:0px 10px} 

Answer 3

您可以在父column創建填充的包裝。

<div class="container"> 
    <div class="row"> 
    <div class="eight columns customise-the-grid"> 
     <div class="small-12 content-wrapper column"> 
      <p>My main content</p> 
      <ul><li>My item</li></ul> 
      <!-- other various content --> 
     </div> 
    </div> 
    <div class="four columns or-create-a-wrapper"> 
     <div class="small-12 content-wrapper column"> 
     <p>My main content</p> 
     <ul><li>My item</li></ul> 
     <!-- other various content --> 
     </div> 
    </div> 
    </div> 
</div> 
<style> 
.customise-the-grid{ 
    padding: 10px; 
} 

.or-create-a-wrapper{ 
    padding: 10px; 
} 

.content-wrapper{ 
    background-color:lightgray; 
    border-radius: 10px; 
} 
</style> 

這裏是一個小提琴： https://jsfiddle.net/mantisse_fr/40cgg84u/