Zurb Foundation 3：网格宽度更小

Question

正在使用Zurb Foundation 3 framework。

我试图在_settings.scss中设置比1000px更小的宽度，但是由于som原因，即使我输入的数字较小，它也只会下​​降到770px。这是我做的：

1. 执行罗盘：compass watch projectname
2. 已编辑_settings.scss：$rowWidth: 660px;

3. 将标记设置为：

   <div class="row">
           <div class="twelve columns">
               <h1>Heading</h1>
               <p>Some message here ...</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) {
       .row {
           min-width: $rowWidth;
       }
   }
   @media only screen and (max-width: 767px) {
       .row {
           width: $rowWidth;
           margin:0 auto;
       }
   }

4. 现在我可以通过更改$ rowWidth来控制_settings.scss中的宽度，例如：$rowWidth: 660px;

只是一个小问题：如果$ columnGutter小于30px，如果屏幕尺寸小于660px，则会有水平滚动。