我正在使用 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 中对此进行了测试,并且都存在这个问题。
最佳答案
您的代码的主要问题是,在具有主页类的 div 元素内部有 4 个元素,每个元素都有一个要填满整个网格的大小类。
在父元素容器中,您可以拥有总和为 12 的元素,并分配 4*12(4 个子 div 元素,每个元素具有 small-offset-1 和 small-11)。此外,您分配给父容器的垂直类使元素垂直拉伸(stretch),这就是您看到所有间距的原因。
我已将您的示例修改为此链接只是为了给您提供另一种方法: https://jsbin.com/falojitalu/edit?html,css,output
关于css - Foundation for Apps 框架基本骨架上的大量间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35654671/