为什么 small-6 在 Foundation 6.4 代码中不起作用？

Question

我正在使用 Zurb Foundation 6.4 框架设计布局，其中我有 3 张卡片，每列有 3 张 320x180 像素的图像。我想要在小屏幕上查看时，每行将有两张卡片。

对于大视图 - 3 列，它按预期工作。但在小视图中它应该有 2 列或卡片，但它显示 1 张卡片或 1 列。

密码本：https://codepen.io/coolsaint/pen/LzbpOy

我无法弄清楚发生了什么。谁能告诉我如何解决这个问题？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />

<div class="grid-container">
  <div class="grid-x small-6 large-4 align-center">


    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    


  </div>
</div>

Answer 1

像这样在 cell class 元素中使用 small-6 large-4 class，

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />

<div class="grid-container">
  <div class="grid-x align-center">


    <div class="cell shrink small-6 large-4">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink small-6 large-4">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    <div class="cell shrink small-6 large-4">
      <div class="card">

        <img src="http://via.placeholder.com/320x180" />

      </div>
    </div>
    


  </div>
</div>

为什么 small-6 在 Foundation 6.4 代码中不起作用？

Why small-6 is not working in this Foundation 6.4 Code?

html

css

flexbox

zurb-foundation