Question

嘿伙计们，我是新手。我正在学习Zurb基础，我的问题是如何增加框架中行的默认宽度。像960网格系统有960像素。我怎样才能将行的愿望增加到1200px，所以我应该添加自定义样式表吗？请帮助，谢谢。

Answer 1

您不必使用!important。只需将新的CSS说app.css - 在foundation.css下方，然后使用以下内容：

.row {
    max-width: .px;
}

您还可以使用其他类并添加此属性，以使其不会与默认行冲突。

Answer 2

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

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

如果您使用SASS，请在documentation中搜索网格变量，您可以在其中找到有关如何覆盖行宽，装订线宽度等信息。

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

Answer 3

更好的方法是转到项目中 _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 4

基础6引入了课程.expanded以使宽度流畅：http://foundation.zurb.com/sites/docs/grid.html#fluid-row

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

如何增加zurb Foundation的行宽？

4 个答案: