0

我正在尝试将 Bootstrap 等效网格复制到我的项目中。我喜欢这个想法，但在配置方面遇到了问题。我正在使用最新版本的 Codekit。

我希望网格使用以下内容：

  • box-sizing：边框框；
  • 网格项目的每边 15 像素的装订线
  • 没有不需要的边距（除非使用了@include push();）。
  • 12 列网格默认值

这些是我当前的设置：

$susy: (
    container:          1170px,
    columns:            12,
    gutter:             .25,
    global-box-sizing:  border-box,
    output:             isolate
);

在我想创建一个 5 列网格的那一刻：

.members{

  &--li{
    @include span(1 of 5);
  }

 }

我期待这个：

.members--li{
  width: 20%;
  float: left;
}

但是得到了这个：

.members--li{
  width: 16.6666666667%;
  float: left;
  margin-right: 4.1666666667%;
}

我不确定边距从何而来，由于这个添加，它永远不会是 5 列网格，我还预计 20% 的宽度。我知道默认值是上面的 12 列，但我设置了 5 列中的 1 列。

4

1 回答 1

0

啊，这有点棘手。在同样的情况下，并编写了一些 mixins 来生成一个像网格一样的引导程序，带有 susy 和断点。还不完美，但在做一份工作^^

结帐：http ://sassmeister.com/gist/toh82/6d31d28888e930783f02

所以接受它，根据需要更改断点值，也许它会帮助你。目前，我的要点中缺少容器大小的迭代，如果这是一个问题，请告诉我。

实现 BS-Grid 的主要内容之一是gutter-position: inside不同的container max-width.

于 2015-07-22T13:18:20.790 回答