Question

我有一个自定义的网格2.0网格，我希望根据屏幕大小将列推送到不同的区域。例如，在移动设备上，页脚提交堆叠在第1位。在桌面上，它被推到屏幕的最右侧。除了他们的计算之外，我的工作正如预期的那样略有偏差。但是我仍然掌握着这个网格，所以也许我正在实施它。

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

Answer 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显示的顺序。

希望这有帮助！

Bourbon / Neat Grid 2.0转移问题

1 个答案: