Foundation 6 如何不环绕弹性网格列？

Question

我决定使用 Foundation 6 的新弹性网格，但我注意到我没有像使用块网格那样获得预期的行为。

这是 HTML，两个实例中使用的代码相同：

<div class="row">
    <div class="small-3 column end text-center red">
        column 1
    </div>
    <div class="small-3 column end text-center green">
        column 2
    </div>
   <div class="small-3 column end text-center green">
        column 3
   </div>
   <div class="small-3 column end text-center green">
       column 4
   </div>

   <div class="small-3 column end text-center green">
       column 5
   </div>
   <div class="small-3 column end text-center green">
       column 6
   </div>
   <div class="small-3 column end text-center green">
       column 7
   </div>
   <div class="small-3 column end text-center green">
       column 8
   </div>

   <div class="small-3 column end text-center green">
       column 9
   </div>
   <div class="small-3 column end text-center green">
       column 10
   </div>
   <div class="small-3 column end text-center green">
       column 11
   </div>
   <div class="small-3 column end text-center green">
       column 12
   </div>
</div>

我尝试使用 Flex Grid and Block Grid

我打算在 Flex Grid 中获取 Block Grid link 的结果，这可能吗？

我浏览了 F6 文档，但找不到合适的解决方案（至少从我找到的内容来看）。

谢谢！

Answer 1

您可以在 Foundation 的 Flex Grid 中使用块状网格。你必须意识到 flex 网格完全取代了标准的 Foundation Grid。此外，Flex Grid 和 Block Grid 是两个完全不同的东西。 Flex Grid 接管了整个网格系统（行、列……）。块状网格只是一种在多行或单行上分配相同数量的列的方法。

这很可能是您要查找的内容：

https://foundation.zurb.com/sites/docs/flex-grid.html#block-grids

这就是在 Flex Grid 中使用 Block Grid 的方法。

您还需要确保启用了 Flex Grid：

https://foundation.zurb.com/sites/docs/flex-grid.html#importing

Foundation 6 如何不环绕弹性网格列？

Foundation 6 how not to wrap around flex grid column?

zurb-foundation-6