css - 最大宽度设置不适用于行

Question

我正在使用 ZF6。我正在使用 SASS 版本。现在创建了一个新行。它的宽度设置为

max-width: 75rem;

我试图在 css 中更改行宽，但它不起作用。我还尝试更改 SCSS 文件中的变量设置，但没有成功。请告诉我如何解决这个问题。谢谢。

Answer 1

如果我没理解错的话，您是想创建一个自定义宽度的自定义行吗？

为此，您可以使用自己的类并包含 grid-row，然后添加您自己的 max-width。

如果这是你的 html:

<div class="custom-row-class">
</div>

然后在你的scss文件中，写

.custom-row-class {
  @include row-width();
  max-width: 75em;
}

请注意，如果您的行位于另一个包含 div 的行中，它将不能比这更宽，因为您的自定义 div 具有 max-width缩小到包含的 div，width: 100% 也会缩小以适应包含的 div。

这里是文档的一些链接。我发现 Foundation 5 文档更容易理解这一点。另请查看 _grid.scss 文件以获取更多信息。

http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html#customize-with-sass

http://foundation.zurb.com/sites/docs/grid.html#building-semantically