如何在 Bourbon Neat 中制作多行行？

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 中制作多行行？

How to make a multiple lines row in Bourbon Neat?

html

css

neat

简答

长答案