css - 如何增加 zurb Foundation 中的行宽？

Question

我正在学习 Zurb 基础，我的问题是如何增加框架中行的默认宽度。

就像一个 960 网格系统有 960 像素。如何将行的愿望增加到 1200 像素，那么我应该添加自定义样式表吗？

Answer 1

您不必使用!important. 只需将您的新 CSS（比如说app.css）放在foundation.css下面并使用以下内容：

.row {
    max-width: .px;
}

您还可以使用另一个类并添加此属性，以便它不会与默认行冲突。

Answer 2

更好的方法是在你的项目中去foundation的_settings.scss文件，如果你没有_settings.css文件或者你不知道它的位置，请在线查看。打开并找到这个

$row-width: rem-calc(980); //change up to what you want

并且这个上限值将生成如下值的行宽，即 61.25rem。

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 61.25rem;
  width: 100%;
}

但现在如果你将行宽从 980 更改为 1280，如下例所示

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

然后你可以在下面看到我的 css 是使用新的 max-width 自动生成的

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 80rem;
  width: 100%;
}

请注意这些设置，因为您可以彻底改变整个网站的外观和布局。

Answer 3

覆盖 .row 类的 max-width 属性，并将其设置为所需的宽度。

.row {
    max-width: ...px !important;
}

如果您使用的是 SASS，请在文档中搜索网格变量，您将在其中找到有关如何覆盖行宽、装订线宽度等的信息。

$row-width: em-calc(1000);

Answer 4

Foundation 6 引入了.expanded使宽度流动的类：http: //foundation.zurb.com/sites/docs/grid.html#fluid-row

它仍然会导致填充问题，不知道如何解决这个问题。