frameworks - Zurb's Foundation 3：グリッド幅が小さい

Question

ZurbFoundation3フレームワークを使用しています。

_settings.scssで1000pxよりも小さい幅に設定しようとしていますが、何らかの理由で、小さい数値を入力しても770pxまでしか下がりません。これが私がしたことです：

1. 実行されたコンパス：compass watch projectname
2. 編集された_settings.scss：$rowWidth: 660px;

3. マークアップを次のように設定します。

   <div class = "row">
           <div class="12列">
               <h1>見出し</h1>
               <p>ここにいくつかのメッセージ...</p>
           </ div>
   </ div>

Answer 1

これが私がそれを解決した方法です：

1. _overrides.scssファイルを作成しました：sass/_overrides.scss
2. app.scssにファイルをインポートしました：@import "overrides";

3. これを_overrides.scssファイルに追加しました：

   @media only screen and（min-width：$ rowWidth）{
       。行 {
           最小幅：$ rowWidth;
       }
   }
   @media only screen and（max-width：767px）{
       。行 {
           幅：$ rowWidth;
           マージン：0自動;
       }
   }

4. _settings.scssこれで、$ rowWidthを変更して、幅を制御できます。次に例を示します。$rowWidth: 660px;

ちょっとした問題が1つだけあります。$columnGutterが30px未満の場合、画面サイズが660px未満の場合、水平スクロールが発生します。