即使指南显示4列，波旁威士忌整洁仍使用12列

Question

我在我正在建造的静态章鱼站点中使用波旁威士忌和整洁。除了打开指南（$visual-grid: true;）之外，我使用的是_grid-settings.scss文件而没有更改。在我的 screen.scss中

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

由于我使用的是默认网格设置，小屏幕应仅为4列宽。

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px

当我在小于450px的屏幕上查看站点时，视觉网格显示4列，但布局仍在使用12列。我有几个地方在布局中使用4列divs，在移动设备上，这些地方应该是完整的宽度，因为页面只有4列，但它们仅是页面宽度的三分之一。我可以通过用@include span-columns(12)替换@include span-columns(4)来验证移动设备仍在使用12列。12列Divs是唯一在移动设备上宽度的Divs。

为什么不整洁指南和我的布局使用相同数量的列？

Answer 1

我认为您只是缺少代码中的逗号，认为您需要：

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px

希望这有帮助

Answer 2

事实证明，问题是由于在断点中不使用@include span-columns(4)，以更改列数（$phone-portrait: new-breakpoint(max-width $tiny-screen 4);）。起初，这似乎很奇怪，直到我了解实际发生的事情。当我将DIV设置为SPAN 4列时，Neat将列数量划分，并将其除以当前断点处的列总数。在我的情况下，这将是0.333，然后用作DIV的宽度百分比。问题是，即使以后更改的列总数有一个断点，这也永远不会改变。我的DIV总是将宽33.3％。我需要做的是重复 span-columns包含在断点的媒体选择器中，例如：

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);
.my-div {
  @include span-columns(4);
}
@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

这可以确保我的DIV在$phone-portrait断点的100％宽度。