grid - 使用基础网格混合添加空间 - sass

Question

我正在尝试使用 sass 和基础网格制作导航栏。我在导航栏中有链接，但我不希望它们每个都存在，@include grid-column(4);而是我希望它们分别为 3 列，然后在右端有 3 列的空白空间。这将类似于以下内容：（ 电子邮件选项卡当前悬停）

如何使用 Foundation Grid Sass Mixins 在此处添加空间。

Answer 1

我通过将每个更改为之前的来解决了id这个@include grid-column(3);问题@include grid-column(4);。我相信这很有效，因为它们是连续的，并且向下的下一列大于 3，因此它不会自动跳转到上方的导航栏，而是位于其下方。

我的 mixins 布局如下：

    header {
          @include grid-row;
         }
    h1 {
          @include grid-column(9);
    }
    .login{
       @include grid-column(3);
    } 
    nav {
          @include grid-column(12);
        } 
  #games {
          @include grid-column(3);
       }
    #email {
          @include grid-column(3);
       }
    #archive {
          @include grid-column(3);
       }
    .breadcrumbs {
       @include grid-column(12);
    }
    nav a {
}