如何增加zurb Foundation的行宽？

Question

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

Answer 1

你不必使用!important.只需放置新的CSS-say app.css-below 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%;
}

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