为什么 Zurb Foundation 的行宽会减少一个装订线宽度？

Question

我将 Foundation 5 与 Sass 一起使用。在 _settings.scss 中，您可以更改行和装订线的宽度。默认情况下，行设置为 1000 像素，但如果您在 Photoshop 中测量 12 列页面的宽度，则它只有 970 像素宽。我还发现装订线的宽度设置为 30px。

我的问题是：为什么 1000px 的行实际上是 970px 宽？我需要担心吗？或者如果我想要 1000 像素宽的页面，我必须将行设置为 1030 像素？

Answer 1

要回答您的问题，您应该更多地了解网格以及“排水沟”是如何构建的。

大网格（带有large-* 类）将应用于宽度超过 64.062 em (~1025px) 的视口。在大网格上，“.row”得到了：

max-width: 62.5rem; // (~1000px)
width: 100%;

所以在大屏幕上，您的.row 确实是 1000 像素宽。 现在网格列使用百分比潜入每一行。因此，large-12 列（跨越 12 列）的宽度为 100%，large-4 的宽度为 4/12 = 33,33%，large-1 的宽度为 1/12 = 8,33%。

上面的意思是一个large-12的宽度是.row类的100%，所以大格子62.5rem； (~1000px)。

您可以按如下方式使前面的内容可见：

HTML：

<div class="row">
  <div class="large-6 columns"><div>text</div></div>
  <div class="large-6 columns"><div>text</div></div>
</div>            
<div class="row">
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
  <div class="large-4 columns"><div>text</div></div>
</div>
<div class="row">
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
  <div class="large-1 columns"><div>text</div></div>
</div>

SCSS：

.row {
background-color: yellow;
div {
background-color: darkblue;
}
color: white;
}

在您的浏览器中，前面的内容将如下图所示：

.row 的盒子模型会告诉你它仍然有 1000px 的宽度：

由于列的蓝色背景颜色与行的黄色背景颜色完全重叠，所以您知道列的宽度之和也应该是 1000px。

现在关于排水沟。默认情况下，装订线已设置为：$column-gutter: rem-calc(30px); (1.875rem)

为了构造排水沟，网格的每一列在每一侧都有一个gutter-size / 2 的填充。因此，large-12 列的宽度为 1000 像素，但左侧的内边距为 15px，右侧的内边距为 15px。因此，一行的宽度似乎为 1000 - 30 = 970 像素。

您也可以通过在之前使用的 HTML 上应用以下 SCSS 代码来使这些排水沟可见：

.row {
background-color: yellow;
div {
background-color: darkblue;
div {
background-color: red;
}
}
color: white;
}

现在您的网格如下所示：

或者通过检查large-12 列的盒子模型：

我的问题是：为什么 1000px 行实际上是 970px 宽？我一定要吗 担心吗？

我认为你首先不应该担心它。见上文。

或者如果我想要 1000 像素宽的页面，我必须将行设置为 1030 像素？

如果你有充分的理由这样做，你可以使用：$row-width: rem-calc(1030);，然后large-12 的盒子模型实际上如下所示：

请注意，您还必须将 $medium-breakpoint: em-calc(1024); 更改为等于或大于 1030 像素的值，以防止视口 >1024 且小于 1030 像素的水平滚动条。

或者您可以考虑通过设置$column-gutter: 0; 来移除装订线。另见：What's the point of gutters in CSS grid frameworks?