Bourbon Neat——网格行为

Question

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

default.html

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

默认.scs

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

page.html

此页面的内容将通过管道传输到default.html 中的｛｛content｝｝

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

page.scs

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

---

预期和期望结果

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

---

实际结果

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

---

结论

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

• 这些div不在@include outer-container内
• Bourbon Neat的语法中有一些我遗漏了
• 内容的流水线正在扰乱网格

---

此外，如果你知道。。。是否需要使用@include outer-container？

Answer 1

来自整洁的文档

指定元素应跨越的列数。如果选择器嵌套了其父元素的列数也可以作为参数传递。

如果您的$grid-columns变量是12，那么在.full-width表达式中，span假定为12上的6列（父级大小的一半）。

正确的表达式是：

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