基金會 - 行不清？

Question

我正在使用Zurb Foundation 5，並且正在尋找一個.row在.row的內部，這樣.row可以充當多列的包裝。這很好，但是當我在內部行內添加背景時，它會滲入頂部行 - 這是正常行爲嗎？

我附上了截圖和我正在使用的代碼。

<div class="row" id="banner" > 

    <div class="large-12 medium-12 columns" style="background:green;"> 
     <h1>Banner/Top</H1> 
    </div> 

    <div id="bio" class="row" style="background:red;" > 
     <div class="large-6 medium-6 columns" > 
      <h1>LEFT</H1> 
     </div> 
     <div class="large-6 medium-6 columns" > 
      <h1>RIGHT</H1> 
     </div> 
    </div> 

</div> 

截圖：

Answer 1

我認爲你需要把頂部的橫幅在它自己的行，它佔用了全寬。就像這樣：

<div class="row" id="banner" > 

    <div class="row"> 
     <div class="large-12 medium-12 columns" style="background:green;"> 
      <h1>Banner/Top</H1> 
     </div> 
    </div> 

    <div id="bio" class="row" style="background:red;" > 
     <div class="large-6 medium-6 columns" > 
      <h1>LEFT</H1> 
     </div> 
     <div class="large-6 medium-6 columns" > 
      <h1>RIGHT</H1> 
     </div> 
    </div> 
</div> 

編輯：您可能需要一個大的12列包裝了旗幟+＃生物行