Question

我正在使用 Zurb Foundation 6.4 框架进行布局，其中我有3张卡片，每张图片各有3张320x180像素的图片。我希望当它在小屏幕上观看时，每行会有两张卡片。

对于大型视图3列，它正如预期的那样工作。但在小视图中它应该有2列或卡，但它显示1卡或1列。

Codepen：https://codepen.io/coolsaint/pen/LzbpOy

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

＆＃13;

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

＆＃13;

Answer 1

在small-6 large-4类元素中使用cell类，如下所示，

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

1 个答案: