Foundation 的网格系统：当屏幕变小时隐藏元素不起作用

Question

我有一个三列布局。这个想法是最右边的列应该在小屏幕上消失。

.rect {
  background-color: lime;
  margin-bottom: 10px;
  padding: 10px 0;
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>

<div class="row text-center">
  <div class="large-4 column rect">FIRST</div>
  <div class="large-4 column rect">SECOND</div>
  <div class="large-4 column rect show-for-medium-up">THIRD</div>
</div>

我认为我使用了正确的 class-名称。其余的编码也应该没问题。

但事实并非如此，我也不知道为什么。

有人知道我做错了什么吗？

Answer 1

试试这个

<div class=" large-4 column rect hide-for-small-only ">THIRD</div>

Answer 2

您使用的 class 有误，请使用 hide-for-small-only 或 show-for-medium:

.rect {
  background-color: lime;
  margin-bottom: 10px;
  padding: 10px 0;
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>

<div class="row text-center">
  <div class="large-4 column rect">FIRST</div>
  <div class="large-4 column rect">SECOND</div>
  <div class="large-4 column rect hide-for-small-only">THIRD</div>
</div>

阅读更多Zurb Foundation Grid

Foundation 的网格系统：当屏幕变小时隐藏元素不起作用

Foundation's grid system: Hiding an element when screen becomes smaller doesn't work

css

responsive-design

zurb-foundation