Bourbon NEAT:4rth列不是内联的

时间:2014-10-19 22:55:06

标签: css sass bourbon neat

我无法理解我在sass中缺少的东西,但我的网格中的4rth列不会内联,但只有3个cols会执行:

我想要一个简单的4列网格,所以我做了:

我的加价

<section id="spots" class="row">
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
    <li class="item">My item</li>
</section>

我的sass:

.item {
    @include span-columns(3);
    @include omega(4);

这应该创建一个4列网格,每4列都会换行,对吗?

2 个答案:

答案 0 :(得分:1)

根据the docs

您需要为该参数使用与正常nth-child调用相同的格式。因此,在这种情况下,&#39; 4n&#39;,而不是&#39;&#39;:

.item {
    @include span-columns(3);
    @include omega(4n);
}

否则,按照Neat的omega mixin的编写方式,它会尝试输出nth-child(4 + 1),但无法编译。

编辑添加:你还需要废弃课程&#39; row&#39;对于父母来说,正如Neat所做的那样。 工作示例:http://codepen.io/anon/pen/lewJj

答案 1 :(得分:0)

这应该可以胜任......

$ grid-columns:12;必须设置为12而不是10 ..

HTML code ..

<div class="fifth">

    <div class="box">
        <p> Box 1 </p>
    </div>
    <div class="box">
        <p> Box 2 </p>
    </div>
    <div class="box">
        <p> Box 3 </p>
    </div>
    <div class="box">
        <p> Box 4 </p>
    </div>
    <div class="box">
        <p> Box 5 </p>
    </div>
    <div class="box">
        <p> Box 6 </p>
    </div>
    <div class="box">
        <p> Box 7 </p>
    </div>
    <div class="box">
        <p> Box 8 </p>
    </div>
    <div class="box">
        <p> Box 9 </p>
    </div>
    <div class="box">
        <p> Box 10 </p>
    </div>
    <div class="box">
        <p> Box 11 </p>
    </div>
      <div class="box">
        <p> Box 12 </p>
    </div>  
</div>

SCSS代码

.fifth {
    @include outer-container;
    div.box {
        font-size: 0.78em;
        height: 8em;
        background-color: #faa;
        margin-top: 2em;
        @include span-columns(3);
        @include omega(4n);
    }
}