Bourbon/Neat Grid 2.0 换档问题答案

【问题标题】：Bourbon/Neat Grid 2.0 shift issueBourbon/Neat Grid 2.0 换档问题
【发布时间】：2017-10-04 09:09:28
【问题描述】：

我有一个自定义的整洁网格 2.0 网格，我想根据屏幕大小将列推送到不同的区域。例如，在移动设备上，页脚提交是第一个堆叠的。在桌面上，它被推到屏幕的最右侧。我所拥有的按预期工作，除了他们的计算可能略有偏差。但我仍然掌握了这个网格的窍门，所以也许我的实施很奇怪。

$no-gutter-grid: (
  columns: 12,
  gutter: 0,
);

footer {
  @include grid-container;
}

.footer-nav {
  @include grid-column(12, $no-gutter-grid);
  @include grid-media($grid-tablet-up) {
    @include grid-column(10, $no-gutter-grid);
    @include grid-shift(-2);
  }
  color: $white;
  nav {
    margin-bottom: 25px;
  }
}

.footer-submit {
  @include grid-column(12, $no-gutter-grid);
  @include grid-media($grid-tablet-up) {
    @include grid-column(2, $no-gutter-grid);
    @include grid-shift(10);
  }
}

还有我的html：

<footer>
  <div class="newsletter">
    <div>
      <p>Subscribe to our newsletter</p>
      <input type="text" placeholder="Name" />
      <input type="email" placeholder="Email" />
      <button class="button-black" type="submit">Sign Up</button>
    </div>
  </div>
  <div class="footer">
    <div class="footer-submit">
      <a href="#" class="button-orange">Submit A Story</a>
    </div>
    <div class="footer-nav">
      <nav>
        <a href="/" class="logo-link"><img class="logo" src="{% static 'img/SAHARA_LOGO_OFFICIALS_WHITE.png' %}"></a>
        <!--TODO change to dynamic links-->
        <a href="#">About</a>
        <a href="#">Contact Us</a>
        <a href="#">Careers</a>
        <a href="#">Support Us</a>
        <a href="#">Advertise</a>
        <a href="#">NewsSources</a>
      </nav>
      <div class="legal">
        <p>&#169;Copyright 2017 Sahara Reporters, Inc. All Rights Reserved.</p>
        <span>
          <a href="#">Privacy Policiy</a> /
          <a href="#">Terms of Use</a>
        </span>


      </div>
    </div>

  </div>
</footer>

【问题讨论】：

标签： css sass neat

【解决方案1】：

为确保我理解，您在桌面上的导航顶部有一个提交按钮。当用户点击平板电脑时，您希望提交按钮位于导航右侧。

如果是这种情况，您将要在自定义网格中使用 direction 属性。它看起来像这样：

$no-gutter-grid_tablet: (
  columns: 12,
  gutter: 0,
  direction: rtl,
);

$no-gutter-grid: (
  columns: 12,
  gutter: 0,
);

footer {
  @include grid-container;
}

.footer-nav {
  @include grid-column(12, $no-gutter-grid);
  @include grid-media($grid-tablet-up) {
    @include grid-column(10, $no-gutter-grid_tablet);
  }
  color: $white;
  nav {
    margin-bottom: 25px;
  }
}

.footer-submit {
  @include grid-column(12, $no-gutter-grid);
  @include grid-media($grid-tablet-up) {
    @include grid-column(2, $no-gutter-grid_tablet);
  }
}

现在你从右到左你不必改变任何东西。相反，它只会颠倒显示 div 的顺序。

希望这会有所帮助！

【讨论】：