波旁利齐仍然使用12列，即使指南显示4列

Question

我正在使用波旁和整洁的静态八达通网站，我正在建设。除了打开指南($visual-grid: true;)之外，我使用的是没有任何更改的$visual-grid: true;文件。在我的screen.scss中，我在波旁之后加载网格设置，但在齐之前加载：

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

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

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

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

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

Answer 1

事实证明，这个问题是由于没有在改变列数( @include span-columns(4) )的断点内的div上使用$phone-portrait: new-breakpoint(max-width $tiny-screen 4);。起初，这似乎很奇怪，直到我明白了到底发生了什么。当我将div设置为span 4列时，neat获取列数并除以当前断点上的列总数。在我的例子中，这将是0.333，然后被用作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%。

Answer 2

我认为您只是在代码中缺少了一个逗号，您需要：

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

希望这能有所帮助