將背景顏色應用於類.row的嵌套元素的問題 - Zurb基礎css框架

Question

我正在使用基礎框架構建響應式網站。

我有以下HTML

<div class="row"> 
    <div class="large-12 columns"> 
     <div class="wrapper"> 
      <div class="large-6 small-6 columns"> 
       <h1>site-title</h1> 
      </div> 
      <div class="large-6 small-6 columns"> 
       <p>descrption</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.wrapper { 
    color: red; 
    background: green; 
} 
h1 { 
    color: red;  
} 

當我添加背景色到.wrapper類這是行不通的。這種情況總是發生在將一個背景應用於一行內部的包裝類的時候，而且一行中有一列共產生了12列。

例如：

大11 +大-11，大-2 +大-10，大-6 +大-6和等。

我已裝箱一個jsfiddle此

Answer 1

這裏你去Fiddle

<div class="row"> 
    <div class="large-12 columns"> 
     <div class="wrapper"> 
      <div class="large-6 small-6 columns"> 
       <h1>site-title</h1> 
      </div> 
      <div class="large-6 small-6 columns"> 
       <p>descrption</p> 
      </div> 
      <div style="clear:both;"></div> 
     </div> 
    </div> 
</div>