基金会5不再使用xlarge和xxlarge网格大小

Question

问题

在Foundation5.0.2和更高版本中，它不使用xlarge和xxlarge网格大小。他们在以前的5.0.0和5.0.1版本中工作。

因此，当从基金会进入css文件时，它只显示小、中和大的网格大小。

显然，基金会5的任何版本都没有xlarge和xxlarge块网格。

问题

有办法让这些东西再起作用吗？

测试

我访问了他们的网站，下载了最新的5.1.1版本，在foundation.css中也有同样的问题。

我正在使用Sass自己构建它，并尝试手动在其中添加覆盖变量：

// Here we define the lower and upper bounds for each media size
$small-range: 0em, 40em // 0, 640px
$medium-range: 40.063em, 64em // 641px, 1024px
$large-range: 64.063em, 90em // 1025px, 1440px
$xlarge-range: 90.063em, 120em // 1441px, 1920px
$xxlarge-range: 120.063em // 1921px

$screen: "only screen"

$landscape: "#{$screen} and (orientation: landscape)"
$portrait: "#{$screen} and (orientation: portrait)"

$small-up: $screen
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"

Answer 1

在您的settings文件中，取消注释并将以下设置为true (对于我来说是第32行)：

$include-xl-html-grid-classes: true;

然后重新编译，xlarge和xxlarge类应该出现。(为了防止发生冲突，一定要清除你的越野车)

Answer 2

在_settings.scss中，您现在可以找到$breakpoint-classes列表并添加所需的额外类。例如：

$breakpoint-classes: (small medium large xlarge);

Answer 3

您必须同时使用这两种方法来启用xlarge和xxlarge类。

 $breakpoints: {
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
}
$include-xl-html-grid-classes: true;
$breakpoint-classes: (small medium large xlarge xxlarge);