2

デフォルトのブレークポイントで折りたたむセクションが 3 つありますが、scss を使用して独自の CSS で折りたたむ方法がわかりません。

うまく機能し、崩壊するデフォルトの基礎グリッド

    <div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
  <div class="large-4 columns">...</div>
</div>

下出ししてみたけど崩れそうにない

<div class="container">
  <div class="div1">...</div>
  <div class="div2">...</div>
  <div class="div3">...</div>
</div>

.container{
@include grid-row;

.div1 {
    @include grid-column(4);
}
.div2 {
    @include grid-column(4);
}
.div3 {
    @include grid-column(4);
}

}

4

3 に答える 3

0

私はこれに困惑しましたが、実際には意図した動作であることがわかりました。これは、 Foundation グリッドの公式ドキュメントからの引用です。

グリッド ミックスインのコードからメディア クエリを除外しました。これにより、任意のブレークポイント内にミックスインを含めることができ、完全に制御できます。ブレークポイントを 10 個作成して、それぞれの間でレイアウトをずらしたい場合は、ぜひ。デフォルトのブレークポイントのみを使用したい場合は、そのための変数があります。

于 2013-09-27T11:49:26.377 に答える
-1

代わりに @extend を使用してください。

    .container{
        @extend .grid;
        div{
            @extend .columns;
        }
    }
    .div1 {
        @extend .large-4;
    }
    .div2 {
        @extend .large-4;
    }
    .div3 {
        @extend .large-4;
    }

うまく機能するいくつかのミックスインを作成しましたが、それにより簡単になると思います: https://gist.github.com/jofralogo/5324278

于 2013-04-06T02:31:20.097 に答える