logo标签列表

如何在 Bulma 的断点平板下隐藏列？

cssbulma
6
给定以下html：
<div class="columns">
  <div class="column">Always here</div>
  <div class="column">Hidden on mobile</div>
  <div class="column">Always here</div>
</div>

如何在移动设备上隐藏中间列？
注意：我在官方文档中没有找到有关此“隐藏”功能的帮助。
4个回答
22
7

is-hidden-mobile可以解决这个问题。

<div class="columns">
  <div class="column">Always here</div>
  <div class="column is-hidden-mobile">Hidden on mobile</div>
  <div class="column">Always here</div>
</div>
3
您需要使用自定义 CSS 来实现这个功能。 

.mobile-hidden {
  display: none;
}

@media (min-width: 769px) {
  .mobile-hidden {
    display: block;
  }
}
<div class="columns">
  <div class="column">Always here</div>
  <div class="column mobile-hidden">Hidden on mobile</div>
  <div class="column">Always here</div>
</div>

1

在你的文件中添加这个CSS

@media only screen and (max-width: 767px) {
.columns .column:nth-child(2) {display: none;}
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接