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

【问题标题】：How to make a multiple lines row in Bourbon Neat?如何在 Bourbon Neat 中制作多行？
【发布时间】：2016-12-26 11:04:54
【问题描述】：

我尝试将我的文章与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。

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

当第五条被评论时，第四条正确地保留在第一行。

如何获得四行文章？

【问题讨论】：

标签： html css neat

【解决方案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>

【讨论】：