Bootstrap 4 - 隐藏类 - 仅在小屏幕上隐藏

Question

如何仅在小 (sm) 屏幕上隐藏 span 内容？我需要此内容在 xs 屏幕上可见。

<span class="hidden-sm-down">Text</span>

有没有办法仅使用 bootstrap 类或不使用？

Answer 1

再次阅读文档发现使用bootstrap类可能无法实现，必须自己完成

所以我最后这样做了：

从bootstrap和

导入了mixins和variables

@each $bp in map-keys($grid-breakpoints) {
  .visible-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: block !important;
    }
  }
  .visible-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: block !important;
    }
  }
}

Answer 2

即将推出 Bootstrap 4 的更新，将在单个视口 (hidden-x) 上启用隐藏功能。

https://github.com/twbs/bootstrap/pull/22113

所有可见性类都将在此更新中改进。

Bootstrap 4 Beta

更新

如果要在 Bootstrap 4 中隐藏特定层（断点）上的元素，请相应地使用 d-* 显示类。记住 xs 是默认的（总是隐含的）断点，除非被 更大的 断点覆盖。

https://www.codeply.com/go/bRlHp8MxtJ

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none（与hidden相同）
hidden-xs（仅）=d-none d-sm-block（与hidden-xs-down相同）
hidden-sm（仅）=d-block d-sm-none d-md-block
hidden-md（仅）=d-block d-md-none d-lg-block
hidden-lg（仅）=d-block d-lg-none d-xl-block
hidden-xl（仅）=d-block d-xl-none

Demo of all hidden / visible classes in Bootstrap 4 beta

另请注意，根据元素的显示类型，d-*-block 可以替换为 d-*-inline、d-*-flex 等。更多关于 display classes in beta

Answer 3

使用 Bootstrap 4 Beta 1，您只能使用 d-block d-sm-none d-md-block 隐藏 sm。

https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/

Answer 4

这很容易。您只需要知道如何正确使用 bootstrap 4 classes。

参考：https://getbootstrap.com/docs/4.0/utilities/display/

首先认为它分为三个有序组。 (当某些组不适用时省略该组)

(hide_lower_limit) (display_size) (hide_upper_limit)

(hide_lower_limit): 只有一个class .d-none
(display_size)：要显示的大小（不隐藏），例如：.d-sm-block、.d-md-block。它的格式为 .d-<size>-block
(hide_upper_limit)：应该隐藏的上限。其格式为 .d-<size+1>-none

让我们看一些例子

Q1：在 md 及更大尺寸上显示。

回答：

从可见屏幕尺寸开始，(display_size)：.d-md-block。

然后想到应该隐藏的所有屏幕尺寸，即所有屏幕尺寸

小于 md 隐藏，(hide_lower_limit)：.d-none
大于md未隐藏，(hide_upper_limit)：<omit>

d-none d-md-block

Q2：显示 sm 及更小。

回答： (display_size): .d-sm-block.

隐藏屏幕尺寸

小于sm未隐藏，(hide_lower_limit)：<omit>
大于sm隐藏，(hide_upper_limit)：.d-md-none

d-sm-block d-md-none

Q3：仅在sm和md中可见。

回答： (display_size): .d-sm-block .d-md-block.

隐藏屏幕尺寸

小于 sm 隐藏，(hide_lower_limit)：.d-none
大于sm隐藏，(hide_upper_limit)：.d-lg-none

d-none d-md-block d-sm-block d-lg-none

Bootstrap 4 - 隐藏类 - 仅在小屏幕上隐藏

Bootstrap 4 - hidden classes - only hide on small screens

bootstrap-4

Bootstrap 4 - 隐藏 类 - 仅在小屏幕上隐藏

Bootstrap 4 - hidden classes - only hide on small screens

bootstrap-4

Bootstrap 4 - 隐藏类 - 仅在小屏幕上隐藏