基础设置错误的列宽

Question

我使用的是 Foundation 6 的 Sass 版本。我遇到了以前从未遇到过的恼人的列宽问题。

这是我的简单 HTML 代码

<div class="foo">
  <div class="foo__row">
    <div class="foo__title">Lorem ipsum</div>
  </div>
</div>

这是SCSS

.foo{
  &__row{
    @include grid-row;
  }
  &__title{
    @include grid-column(12);
  }
}

但是 CSS 将 foo__title 的宽度设置为 150% 而不是 100%。

有谁知道为什么？我要疯了

Answer 1

据我所知，您在 class:

中包含了一个名为：grid-column(12) 的 mixin

&__title{
    @include grid-column(12);
}

在我们的项目中搜索：grid-column(12) 看看里面有什么，我敢肯定你会得到上面的结果。

Answer 2

已解决！我注意到有一行声明为

@include grid-row(8);

所以网格系统是基于 8 列而不是 12 列。

Foundation set wrong column width