Foundation for Apps 框架基本骨架上的大量间距
Massive spacing on Foundation for Apps framework basic skeleton
我正在使用 Foundation for Apps（不是 Foundation for Sites），我遇到了一个问题，我的 divs 上有很多空格。
我正在使用他们使用 flexbox 的新网格系统。
我 'thought' 我正确地使用了他们的系统。
为了帮助理解我做了什么，我在 jsfiddle 中提供了代码：https://jsbin.com/nekubu/edit?html,css,output
谁能帮忙指出为什么会有这么多间距？
我怀疑我以错误的方式使用了这个网格系统，但是文档和示例不够广泛，无法获得与我相关的良好用例。
背景语境：
首先，我根据 Bootstrap 的想法为 'rows' 添加了网格块，为 'columns' 添加了网格内容，然后在 Foundation for Apps 文档中准确地遵循它们。但后来我意识到这看起来完全错了，因为每个 div 都是可滚动的并且聚集在一起。
Content Blocks - Grid - Foundation for Apps Docs
"If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks."
现在我有了您在这个 jsfiddle 中看到的代码。但是，现在有所有这些间距。我已经在 Firefox 和 Chrome 中对此进行了测试，两者都有这个问题。
您的代码的主要问题是，在主页 class 的 div 元素内部有 4 个元素，每个元素都有一个大小 classes填满整个网格。
在父元素容器中，您可以拥有总和为 12 的元素，并分配 4*12（4 个子 div 元素，每个元素具有 small-offset-1 和 small-11）。此外，您分配给父容器的垂直 class 使元素垂直拉伸，这就是您看到所有间距的原因。
我已将您的示例修改为 link 只是为了给您提供另一种方法：
https://jsbin.com/falojitalu/edit?html,css,output
我正在使用 Foundation for Apps（不是 Foundation for Sites），我遇到了一个问题，我的 divs 上有很多空格。
我正在使用他们使用 flexbox 的新网格系统。 我 'thought' 我正确地使用了他们的系统。
为了帮助理解我做了什么，我在 jsfiddle 中提供了代码：https://jsbin.com/nekubu/edit?html,css,output
谁能帮忙指出为什么会有这么多间距？ 我怀疑我以错误的方式使用了这个网格系统，但是文档和示例不够广泛，无法获得与我相关的良好用例。
背景语境：
首先，我根据 Bootstrap 的想法为 'rows' 添加了网格块，为 'columns' 添加了网格内容，然后在 Foundation for Apps 文档中准确地遵循它们。但后来我意识到这看起来完全错了，因为每个 div 都是可滚动的并且聚集在一起。
Content Blocks - Grid - Foundation for Apps Docs
"If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks."
现在我有了您在这个 jsfiddle 中看到的代码。但是，现在有所有这些间距。我已经在 Firefox 和 Chrome 中对此进行了测试，两者都有这个问题。
您的代码的主要问题是，在主页 class 的 div 元素内部有 4 个元素，每个元素都有一个大小 classes填满整个网格。
在父元素容器中，您可以拥有总和为 12 的元素，并分配 4*12（4 个子 div 元素，每个元素具有 small-offset-1 和 small-11）。此外，您分配给父容器的垂直 class 使元素垂直拉伸，这就是您看到所有间距的原因。
我已将您的示例修改为 link 只是为了给您提供另一种方法： https://jsbin.com/falojitalu/edit?html,css,output