如何使用布尔玛在断点平板电脑下隐藏列？

Question

给出以下html：

<div class="columns">
  <div class="column">Always here</div>
  <div class="column">Hidden on mobile</div>
  <div class="column">Always here</div>
</div>

如何使中间列在移动设备上隐藏？

注意：official doc上的“隐藏”功能没有帮助。

Answer 1

is-hidden-mobile隐藏在移动设备上，而is-hidden-touch隐藏在移动设备和平板电脑上。隐藏功能位于响应帮助程序下的官方文档中：

https://bulma.io/documentation/modifiers/responsive-helpers/#hide

Answer 2

隐藏式手机可以解决问题

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

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

Answer 4

将此CSS添加到文件中

@media only screen and (max-width: 767px) {
.columns .column:nth-child(2) {display: none;}
}