Html Neat忽略移动设备上的网格

我正在使用整齐的网格。在12格上一切都很好，但在移动设备上却不能正常工作

SCSS：

网格设置

@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:

工作原理
头
正文

头
正文

头
正文

桌面：

流动电话：

---

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

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

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

，新的断点函数将许多列作为其最后一个参数

---

如果您选择的话，您可以将移动视图更改为12列，并相应地修改网格设置。

您是否尝试查看已编译的CSS以查看它是否生成了您期望的内容？

<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>

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