Question

我有三栏布局。我们的想法是，最右边的列将在小屏幕上消失。

＆＃13;

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

＆＃13;

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

＆＃13;

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

但它并没有，我也不知道为什么。

有谁知道我在这里做错了什么？

Answer 1

试试这个

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

Answer 2

您使用的是错误的课程，请使用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

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

2 个答案: