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

我不是波旁威士忌的专家。但基于第一次看每行有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 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>

SCSS

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

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

2 个答案: