2

私は、sass と bourbon のきちんとしたグリッド フレームワークを使用する非常に基本的な Web サイトを持っています。( http://neat.bourbon.io/examples/ ) サイトと同じ効果を達成しようとしています。幅 800px では、グリッドにブレークポイントがあるように見え、スパン列がドロップされ、幅 100% になります。

以下のコードは、ラッパーと 2 つの 4 および 8 スパン div を出力します。ブラウザーを 300px まで小さくしても、グリッドは維持され、タイトルとコンテンツの div は壊れず、全幅 100% になります。

どうすればこの効果を達成できますか? デフォルトで div を 100% にして、ブレークポイントでスパン列を追加しようとしましたが、これは機能しません。ありがとう。

.wrapper {
@include outer-container;
.title {@include span-columns(4);}
.content {@include span-columns(8);}
}

<div class="wrapper">
<div class="title"></div>
<div class="content"></div>
</div>
4

1 に答える 1

1

これを行うには、ブレークポイントを指定する必要があります。@includeNeatsだけmedia($your_settings)で準備完了です。詳細はこちらをご覧ください。このようなもの：

.wrapper {
  @include outer-container; 

  .title {
    @include span-columns(4);

    @include media(max-width 300px) {
      @include span-columns(12); // or whatever you need for 100% width
    }
  }

  .content {
    @include span-columns(8)
  }
}
于 2014-06-15T11:00:48.183 に答える