Question

我是基金会的新手，但是有可能使默认网格宽度更大或更好，只有80％的屏幕宽度和额外的最小宽度？

如果基金会无法实现，是否可以使用Bootstrap？

Answer 1

基金会3的一个好处是它是用SASS构建的，因此网格系统的CSS完全依赖于变量。

行的宽度在scss/foundation/components/_grid.scss：

中设置样式

/* The Grid ---------------------- */

.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }

  &.collapse {
    .column, .columns { padding: 0; }
  }
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
    &.collapse { margin: 0; }
  }
}

行的总宽度依赖于$rowWidth变量，而变量又在scss/foundation/_settings.scss中定义：

// Grid Settings

$rowWidth: 1000px !default;
$columnGutter: 30px !default;
$totalColumns: 12 !default;
$mobileTotalColumns: 4 !default;
$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported

所以您需要将$rowWidth变量更改为您需要的任何大小。

Answer 2

使用Foundation 4我只是添加了

.row { max-width: 100%; }

到样式。适用于rows以及top-bar

Answer 3

如果您使用SASS和基础版本5，则可以使用以下内容自定义行：

$row-width: 100%;

采用ZURB Foundation的半流体设计？

3 个答案: