使用Bourbon Neat去除跨度柱上的边距

Question

我开始使用Thoughtbot的Bourbon Neat来响应网格.总的来说,它很漂亮,我真的很喜欢它,但我挂了一个小问题.

我试图让两个列在没有边距的情况下彼此相邻,但在尝试复制他们的示例之后,我没有得到相同的结果.

这是HTML示例:

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

这是我的SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

产生这个:

但是,当我尝试使用table方法将两列嵌套/对接时,如他们的示例所示,我得到了:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

输出:

如果我去了有效的@include omega();路线,但它没有扩展最后一列的全宽:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

输出:

从本质上讲,我可以省略容器部分中的内容,它会产生一些产生我正在寻找的结果的内容.但div为了达到这个目的,创造一个空是必要的吗？:

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML(.container已注释掉的内容):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

输出:

无论如何,我不知道实现这一目标的"正确"方式是什么.该文档并不具体用于解释如何使两列相互嵌套.从我试图在他们的例子中复制的内容并没有产生相同的结果.

除非我需要margin:0;在最后一栏上专门添加一个.

Answer 1

您可以执行类似 @include span-columns(6 of 12,block-collapse) 的操作