为什么Zurb基金会的行宽减少一个水沟宽度？

Question

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

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

Answer 1

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

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

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

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

以上意味着large-12的宽度为100%类的.row，因此在大网格62.5rem上; （〜1000像素）。

您可以按如下方式显示前面的内容：

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宽？我一定要吗   担心吗？

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

  

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

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

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

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