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

Question

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

对于大 View - 3 列，它按预期工作。但在小 View 中它应该有 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 类元素中使用 small-6 large-4 类，

<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>