如何用波旁威士忌整齐地做三列网格? [英] How to do a three column grid with bourbon neat?

问题描述

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

I'm trying to create a three column grid, and have the columns evenly distributed across the row.

我的标记很简单:

<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也很简单.

My scss is also pretty straight-forward.

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

但是结果是一团糟:

那接近我想要的.但是街区到处都是. 它们在水平或垂直方向上都不均匀分布.

That's close to what I want. But the blocks are all over the place. They aren't evenly distributed either horizontally or vertically.

这可能是怎么回事? 如何获得具有均匀分布块的简单三列网格?

What could be going on here? How can I get a simple three-column grid with even distribution of blocks?

推荐答案

您需要在此处使用omega mixin.试试这个:

You would need to use the omega mixin here. Try this:

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

此处有更多信息:

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

这篇关于如何用波旁威士忌整齐地做三列网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！