Zurb基金會 - Sass列不停留在行

Question

我有一個非常基本的問題獲得列在Sass/Compass的基金會4工作。

在屏幕尺寸大於$ small media-query breakpoint（768px）時，我希望兩列的寬度相等（每列6列）並且彼此相鄰。現在，在屏幕尺寸大於$ small的情況下，每列只佔用頁面的左半部分，而第二列則低於第一列。

我試過使用Foundation的類而不是Sass mixins，但我得到了相同的結果。我也嘗試重置到Foundation默認設置和導入，但沒有任何更改。

我有以下HTML：

<section> 
    <div class="header"> 
    <h1>Sample text here.</h1> 
    </div> 
    <div class="content"> 
    <p>Sample text here.</p> 
    </div> 
</section> 

我使用以下SCSS：

section { 
    @include grid-row; 
} 

.header { 
    @include grid-column(12); 
    @media #{$small} { 
    @include grid-column(6); 
    } 
} 

.content { 
    @include grid-column(12); 
    @media #{$small} { 
    @include grid-column(6); 
    } 
} 

而這裏來減少測試用例的鏈接：http://bit.ly/149zpEq

紅柱和綠色的專欄應該在768px以上的屏幕尺寸上並排放置。唉，他們不是。

Answer 1

把你的Sass改成這個。

.header { 
    display: table-cell; 
    @include grid-column(12); 
    @media #{$small} { 
    @include grid-column(6); 
    } 
} 

.content { 
    display: table-cell; 
    @include grid-column(12); 
    @media #{$small} { 
    @include grid-column(6); 
    } 
} 

display：它自己的表是不夠的，子元素必須有display：table-cell。

另一種選擇是

section > div{ 
    display: table-cell; 
} 

Answer 2

使用此標記無需任何附加青菜代碼：

<section class="row"> 
    <div class="large-6 medium-6 small-12 columns"> 
     <div class="header"> 
      <h1>Sample text here.</h1> 
     </div> 
    </div> 
    <div class="large-6 medium-6 small-12 columns"> 
     <div class="content"> 
      <p>Sample text here.</p> 
     </div> 
    </div> 
</section> 

你只需要加上「大6」和「中等6」的屏幕大於小$併爲小屏幕添加「小12」。