css - Foundation for Apps 框架基本骨架上的大量间距

Question

我正在使用 Foundation for Apps(不是 Foundation for Sites)，我遇到了一个问题，我的 div 上有很多空格。

我正在使用他们的新网格系统，它使用了 flexbox。我“认为”我正确地使用了他们的系统。

为了帮助理解我做了什么，我在 jsfiddle 中提供了代码:https://jsbin.com/nekubu/edit?html,css,output

有人能帮忙指出为什么会有这么多间距吗？我怀疑我以错误的方式使用了这个网格系统，但文档和示例不够广泛，无法获得与我相关的良好用例。

背景语境:

首先，我根据 Bootstrap 的想法为“行”添加了网格 block ，为“列”添加了网格内容，然后在 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 中对此进行了测试，并且都存在这个问题。

• 代码:https://jsbin.com/nekubu/edit?html,css,output
• 预览:https://jsbin.com/nekubu

Answer 1

您的代码的主要问题是，在具有主页类的 div 元素内部有 4 个元素，每个元素都有一个要填满整个网格的大小类。

在父元素容器中，您可以拥有总和为 12 的元素，并分配 4*12(4 个子 div 元素，每个元素具有 small-offset-1 和 small-11)。此外，您分配给父容器的垂直类使元素垂直拉伸(stretch)，这就是您看到所有间距的原因。

我已将您的示例修改为此链接只是为了给您提供另一种方法: https://jsbin.com/falojitalu/edit?html,css,output