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

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

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

正确的表述是：

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