8

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

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

4

4 回答 4

12

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

.row {
    max-width: .px;
}

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

于 2014-03-22T16:35:59.400 回答
5

更好的方法是在你的项目中去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%;
}

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

于 2015-12-01T13:41:29.997 回答
4

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

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

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

$row-width: em-calc(1000);
于 2013-11-11T13:31:03.147 回答
-1

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

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

于 2016-07-22T11:06:33.270 回答