Question

我尝试将文章与Bourbon Neat的简单网格对齐。

html：

<body>
  <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article> <!-- << comment this to solve the problem -->
  </section>
</body>

scss：

@import "neat";

section {
  @include outer-container;
  article { @include span-columns(3); }
}

CodePen example。

如您所见，第四和第五篇文章被发送到下一行。

当评论第五篇文章时，第四篇文章正确地保留在第一行。

如何获得四篇文章的行？

Answer 1

简短回答

您必须删除行的最后一项的右边距。在Neat中，您可以使用omega()来实现此目的：

section {
  @include outer-container;
  article {
    @include span-columns(3);
    @include omega(4n);
  }
}

Working CodePen

答案很长

部分中的最后一篇文章没有margin-right。

section article:last-child {
  margin-right: 0;
}

当你在一个部分中有5篇文章时，第4个不是最后一个，所以它会获得一个边距，这会强制它进入下一行。当你移除第5个时，第4个成为最后一个，它的边距被移除，这使它适合行。

您可以删除第4篇文章中的边距，如下所示：

section article:nth-of-type(4) {
  margin-right: 0;
}

如果您想要多行4篇文章，这可能会有问题。可能更好的是更改HTML标记...

<section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
</section>
<section>
    <article>5</article>
    <article>6</article>
    <article>7</article>
    <article>8</article>
</section>

如何在Bourbon Neat中制作多行？

1 个答案:

简短回答

答案很长