如何用波旁威士尼整齐做三列网格？

Question

我正在尝试创建一个三列网格，并使列均匀分布在整个行中。

我的标记很简单：

<div class="row">
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
  <div class="col">
  </div>
</div> 

我的scss也很直接。

 .row {
    @include outer-container ;
  }
 .service {   
    @include span-columns(4) ;
}

然而结果是一团糟：

这接近我想要的。但这些街区到处都是。 它们不是水平或垂直均匀分布的。

这可能会发生什么？ 如何获得具有均匀分布块的简单三列网格？

Answer 1

您需要在此处使用omega mixin。试试这个：

.row {
    @include outer-container ;
  }
 .service {   
    @include span-columns(4);
    @include omega(3n);
}

此处提供更多信息：

http://thoughtbot.github.io/neat-docs/latest/#omega