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

Question

我在Sass中使用Foundation 5。在_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的是1000像素宽确实如此。 现在，网格列使用百分比划分每一行。因此，large-12列（跨12列）的宽度为100%，large-4得到4/12 = 33,33%，而large-1得到1/12 = 8,33%。

以上意思是large-12的宽度为的.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的盒模型会告诉你，它仍然得到了1000像素宽度：由于列的蓝色背景色的

完全重叠的行的黄色背景颜色，你知道列的宽度的总和也应该是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);更改为等于或大于1030像素的值，以防止视口> 1024且小于1030像素的水平滚动条。

或者您可以考虑通过设置$column-gutter: 0;来移除排水沟。另请参阅：What's the point of gutters in CSS grid frameworks?