Question

我正在使用zurb foundation this template。

这是一个3列模板，当窗口宽度变为1000像素以下时，列会折叠。

但我不想让它们崩溃直到700像素。我怎样才能改变它？

在rails环境中，我改变了这样，但似乎没有发生任何事情。

// foundation_and_overrides.scss

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

如果可能，我想在宽度低于1000像素时删除[ad]列，在低于700像素时折叠。如果实施并不困难，我更喜欢这种行为。

Answer 1

看起来你在这里遇到两个问题。

首先，您引用的模板使用medium网格类。当屏幕大小达到medium断点时，它们会使列全宽。以下是在该模板中设置行的方式：

<div class="row">
  <div class="large-3 columns">
    <!-- Content Here -->
  </div>
  <div class="large-6 columns">
    <!-- Content Here -->
  </div>
  <div class="large-3 columns">
    <!-- Content Here -->
  </div>
</div>

要更改此值以使列保持固定，直到大约700px，您可以将列类更改为：

<div class="row">
  <div class="medium-3 columns">
    <!-- Content Here -->
  </div>
  <div class="medium-6 columns">
    <!-- Content Here -->
  </div>
  <div class="medium-3 columns">
    <!-- Content Here -->
  </div>
</div>

第二个问题是media-query断点。默认情况下，$small-range大小为0-40em。根据您设置的$rem-base，您可能需要适当更改范围。

例如，如果您的$rem-base是默认16px，则表示您的网格在16px * 40 = 640px折叠为单个列（使用上面的HTML）。

如果您希望它以700px完全折叠，并且$base-rem为16px，则需要将$small-range更改为(0em, 43.5em)。

如何使用zurb基础模板折叠列时的宽度

1 个答案: