gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:08:18 25 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

像这样在 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>

关于html - 为什么 small-6 在 Foundation 6.4 代码中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46470045/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com