2

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 を超える画面サイズでは、赤い列と緑の列を並べて表示する必要があります。残念ながら、そうではありません。

4

2 に答える 2

1

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>

$small より大きい画面の場合は 'large-6' と 'medium-6' を追加し、小さい画面の場合は 'small-12' を追加するだけです。

于 2013-11-09T20:21:20.950 に答える
0

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: table だけでは不十分です。子要素には display: table-cell が必要です。

別のオプションは

section > div{
  display: table-cell;
}
于 2013-03-21T13:08:56.313 に答える