Foundation 6 实际应用中的列行 class

Question

<div class="column row">
  Row column
</div>

基金会文档没有给出任何使用此功能的实际示例。有人知道如何正确使用它吗？和Bootstrap中的.container不一样吗？

Answer 1

您必须将列放在行内。它与 bootstrap 非常相似。这里有一个 link 可以提供帮助。

http://foundation.zurb.com/sites/docs/grid.html

<div class="row">
  <div class="large-6 columns"><!-- ... --></div>
  <div class="large-6 columns"><!-- ... --></div>
</div>

Answer 2

在大多数情况下，您会在行 div 内创建列 div，如下所示：

<div class="row">
    <div class="small-12 columns">
        Foo
    </div>
</div>

如果列 div 的宽度为 12，您可以将该结构替换为：

<div class="column row">
    Foo
</div>

实用吗？如果第一个场景在你的 html 中随处可见，那么也许是。

而且，至于可读性可能没那么高。