Neat 忽略移动设备上的网格

Question

我正在使用整洁的网格。在 12-Grid 上一切都很好，但在移动设备上它无法正常工作。

SCSS：

.how-it-works{
  @include outer-container;
  border: 1px solid green;
  &--box{
    border: 1px solid red;
    @include span-columns(4);
  }
}    

网格设置

@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails
// Neat Breakpoints
$medium-screen: em(640);
$large-screen: em(860);
$mobile: new-breakpoint(max-width 500px 4);
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
// Debug
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

.HTML：

<section class="how-it-works">
      <h3>How it works</h3>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Customer ordering german candy." src="images/asian_girl.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="The Candy German handpicks high quality candy." src="images/bavarian_man.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Postman with the german candy box." src="images/postman.png">
      </div>
    </section>

桌面：http://cl.ly/image/0r2f0N0l132y

移动：http://cl.ly/image/0j0n3e1K0V07

我认为移动版本使用 12 列网格，但显示 4 列网格。

Answer 1

答案就在网格设置文件中：

$mobile: new-breakpoint(max-width 500px 4);

在 Neat 文档中，new-breakpoint 函数将许多列作为其最后一个参数。

您可以将移动视图更改为具有 12 列，并相应地修改网格设置（如果您愿意）。