当连续超过 2 列时，列不能正确对齐

Question

我有这个 css:

div.row {
  @include outer-container; 
  div.col-5 { @include span-columns(5); }
  div.col-6 { @include span-columns(6); }
}

还有这个html：

<div class="jobs row">
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
</div>

我希望每行最多 2 divs。

但是，第一个 col div 不是并排显示，而是第二行向左显示第三个，第一个 div 仍然显示仅第一行，其他 2 行并排在下方。

例如，如果我将第二个 div 的 class 更改为 col-5，则它们会正确排列。

为什么它们不能正常下降，例如在一行中使用 bootstrap 列时？

Answer 1

我不是纯波旁威士忌的专家。但根据第一眼看，每一行有 12 列，所以如果你想要 3 个 div 在同一行中对齐，你可能必须执行 12/3=4。所以你的 html 应该是

CSS

div.row {
  @include outer-container; 
  div.col-6 { @include span-columns(6); }
}

HTML

<div class="jobs row">
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
</div>

Answer 2

您需要使用 omega 混合宏。试试这个：

HTML

<div class="jobs row">
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
  <div class="col col-6">Front End Developer</div>
</div>

SCSS

div.row {
  @include outer-container; 
  div.col-6 { 
    @include span-columns(6); 
    @include omega(2n);
  }
}

当连续超过 2 列时，列不能正确对齐

Columns don't align properly when more than 2 in a row

css

neat

bourbon