如何增加zurb Foundation的行宽?

时间:2013-11-10 05:58:51

标签: css zurb-foundation

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

4 个答案:

答案 0 :(得分:12)

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

.row {
    max-width: .px;
}

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

答案 1 :(得分:4)

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

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

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

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

答案 2 :(得分:4)

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

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

答案 3 :(得分:-1)

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

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