zurb 基金会 - 更改网格容器大小？

Question

.grid-container在大屏幕上的默认宽度是多少？我怎样才能改变它并使它变大？正确的做法是什么？

Answer 1

只需打开您的“_settings.scss”文件，运行到第 2 节“断点”（第 103 行）并根据需要编辑像素值。

// 2. Breakpoints
// --------------

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Answer 2

这是一个更快的解决方案，不会弄乱设置：

/**
* Change container size on xxlarge screen.
*/
@media screen and (min-width: 90em) {
    .grid-container {
        max-width: 85rem;
    }
}

Answer 3

.grid-container 的默认宽度在 _settings.css 文件中定义。在 Xy Grid 部分检查它：

// 56.XY 网格

$网格容器：$全局宽度；

因此，默认宽度为 $global-width。然后您可以在全局部分更改它：

// 1. 全局

$global-width: rem-calc(1200);

例如：1440px :

$global-width: rem-calc(1440);

zurb foundation - change grid-container size?