css - ZURB Foundation 的半流体设计？

Question

我是 Foundation 的新手，但是否有可能使默认网格宽度更大，或者更好，只是屏幕宽度的 80%，并增加一个最小宽度？

如果Foundation不可能，那么Bootstrap有可能吗？

Answer 1

使用 Foundation 4 我只是添加了

.row { max-width: 100%; }

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

Answer 2

Foundation 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 3

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

$row-width: 100%;