当一行超过 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 个 coldiv，然后在左侧的第二行显示第三个div，第一个div 单独保留在第一行上，其他 2 个并排落在下面。

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

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

Answer 1

你需要使用omega mixin。试试这个：

.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>

南海

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

Answer 2

我不是波旁威士忌的专家。 但是根据第一眼，每行有 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>