css - 当连续超过 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 个 div。

但是，不是并排显示前 2 个 col div，然后是第二行左侧的第三个 div，第一个 div 单独保留在第一行，另一个2 并排落在下方。

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

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

Answer 1

您需要使用 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);
  }
}