Bourbon Neat - 网格行为

Question

我正在使用Bourbon Neat网格来调整网页上各种div的宽度。

default.html中

<main class = "default-content">
    {{ content }}
</main>

default.scss

main {
    @include span-columns(6);
}

page.html中

此页面的内容将在default.html

中以{{content}}为管道

<div class = "full-width">
</div>

page.scss

.full-width {
    @include span-columns(6);
    border: 1px solid #111;
}

预期和期望的结果

<div class="full-width">的宽度将是父div的全宽。

实际结果

<div class="full-width">的宽度只是父div的宽度的一半。

结论

我的印象是，子div将是父div的全宽，因为它们都是@include span-columns(6)。我的猜测是，这不是实际结果，因为

• 这些div不在@include outer-container
范围内
• Bourbon Neat我缺少的语法中有一些东西
• 内容的流水线操作正在弄乱网格

另外，如果您知道......是否需要使用@include outer-container？

Answer 1

来自Neat documentation

  

指定元素应跨越的列数。如果   selector嵌套其父元素的列数   也可以作为论据传递。

如果您的$grid-columns变量为12，则在.full-width表达式中，假设跨度超过12列6（父级的一半）。

正确的表达是：

 .full-width {
    @include span-columns(6 of 6);
    border: 1px solid #111;
 }