Foundation 4 で Sass/Compass を使用して列を動作させるには、非常に基本的な問題があります。
$small media-query ブレークポイント (768px) よりも大きい画面サイズでは、2 つの列を同じ幅 (それぞれ 6 列) にして隣り合わせにします。現在、$small より大きい画面サイズでは、各列はページの左半分のみを占め、2 番目の列は最初の列の下に突き出ています。
Sass ミックスインではなく Foundation のクラスを使用してみましたが、同じ結果が得られます。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 を超える画面サイズでは、赤い列と緑の列を並べて表示する必要があります。残念ながら、そうではありません。