最大宽度设置不适用于行答案

【问题标题】：maximum width setting not working for row最大宽度设置不适用于行
【发布时间】：2016-12-29 19:42:29
【问题描述】：

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

max-width: 75rem;

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

【问题讨论】：

【解决方案1】：

如果我理解正确，您是在尝试创建具有自定义宽度的自定义行吗？

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

如果这是你的 html：

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

然后在你的 scss 文件中写入

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

请注意，如果您的行在另一个包含 div 的行内，它将无法变得比这更宽，因为您的自定义 div 具有缩小到包含 div 的 max-width 和 width: 100%也会缩小以适应包含的 div。

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

【讨论】：

【解决方案2】：

如果你想让row 和width 等于整个视口的宽度，那么你可以使用：

<div class="row expanded">

如果您使用两个 css 文件，请检查您提到foundation.css 或foundation.min.css 和app.css 或custom.css 的顺序。 former 应该跟在 latter 后面，而不是相反。

如果还是不行，你可以试试：

.row
{
  max-width: 80rem !important;
}

【讨论】：