Question

我正在使用Neat Grid。在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);

In the Neat documentation，new-breakpoint函数将许多列作为其最后一个参数。

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

Neat忽略了手机上的网格

1 个答案: