基金会 - 支持x（x）大？

Question

我已经开始玩基金会，我意识到有可能支持更大的屏幕，但我不知道如何启用。

我基本上想要做的是能够处理更大的屏幕（高达1920px）并以各种方式使用这些额外的断点，例如能够指定必须在xxlarge上显示块网格的元素数量，xlarge，large，...

我已经检查了设置文件，但有一些东西似乎表明它是可能的。

我首先取消注释：

//$row-width: rem-calc(1000);

并将其设置为：

$row-width: rem-calc(1920);

有了这个，我看到我的可寻址屏幕更大但断点仍然相同。

我也没有注释：

$large-breakpoint:  em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

...等等。 （以及d.Media查询范围部分中的几乎所有内容）

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

但即使启用了所有这些功能，断点仍然无法解决这样的简单问题：

<div class="row">
<div class="xlarge-12 columns">content</div>
</div>

这会显示与大12

完全相同的div

有什么想法吗？

由于 劳伦

Answer 1

$row-width指的是最大内容宽度。基础网格为12列，因此任何{size}-12的div都是100％宽。这就是为什么大12和xlarge-12 divs的宽度相同。

要在大屏幕上缩小内容，在xlarge屏幕上放大，请尝试以下操作：

<div class="row">
    <div class="large-10 xlarge-12 columns">content</div>
</div>