Zurb Foundation - колонки Sass не остаются в строке

Question

У меня возникла очень простая проблема с получением столбцов для работы в Foundation 4 с Sass/Compass.

При размерах экрана, больших, чем контрольная точка $ small media-query (768px), я хочу, чтобы два столбца были одинаковой ширины (по шесть столбцов каждый) и рядом друг с другом. Прямо сейчас, при размерах экрана, больших $ 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

Красный колонке и зеленый столбец должен быть бок о бок при размерах экрана, превышающем 768 пикселей. Увы, это не так.

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); 
    } 
} 

дисплей: таблица на своем собственном не достаточно, дочерние элементы должны иметь отображение: table-cell.

Другим вариантом было бы

section > div{ 
    display: table-cell; 
} 

Answer 2

Используйте эту разметку без какого-либо дополнительного кода Sass:

<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' для экрана больше, чем $ small и добавьте «small-12» для небольшого экрана.