Bourbon Neat - 列数不均匀

Question

我正在尝试构建类似 Metro 的布局，具有不同的列宽（不使用 Masonry 等任何东西），但高度相同，如下所示：

--------------------------
| col(2)        | col(1) |
--------------------------
| col(1)| col(1)| col(1) |
--------------------------
| col(1) | col(2)        |
--------------------------

我尝试使用文档中提到的各种功能，但无法正确使用。我现在的代码如下：

SCSS

// Config
$border-box-sizing: true !default;
$visual-grid: true !default;

// Container
.container {
    @include outer-container;
}

article.post {
    @include span-columns(4);
    height: 300px;
    background: #aaa;
}

article.large {
    @include span-columns(8);
}

HTML

<div class="container">
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post large">text</article>
</div>

如您所见，没什么特别的。我该怎么做才能解决这个问题（除了返回 Bootstrap:)）？

Answer 1

您需要使用 @include omega(); 来获取换行符。

http://thoughtbot.github.io/neat-docs/latest/#omega

因此，由于您想在每 12 个 span-cloumns 后休息一下，因此需要在此处添加 omega。

在您给出的示例中，它可能看起来像这样。

添加这个scss:

article.break {   @include omega(); }

并将您的 html 更改为：

<div class="container">
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post">text</article>
    <article class="post break">text</article>
    <article class="post large">text</article>
    <article class="post break">text</article>
    <article class="post">text</article>
    <article class="post large break">text</article>
</div>

Bourbon Neat - 列数不均匀

Bourbon Neat - uneven column count

html

neat

twitter-bootstrap

bourbon