Question

如何仅在小（sm）屏幕上隐藏span内容？我需要在xs屏幕上显示此内容。

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

有一种方法可以只使用bootstrap类吗？

Answer 1

即将推出的Bootstrap 4更新将隐藏在单个视口（this.storage.get('AlertOn100').then((val) => { if (val==true){ if(res.power<100 && res.power>50){ LocalNotifications.schedule({ title: "Electricity is below 100 Units", text: "Please recharge to avoid running out", at: new Date(new Date().getTime() + 1 * 60 * 1000), sound: null }); console.log("Units Below 100 . The guy should be notified") }else{ console.log("Don't send notification at 100 Units because the units are above that value") } } })）上。

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

此更新中将修改所有可见性类。

Bootstrap 4 Beta更新

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

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

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

Demo of all hidden / visible classes in Bootstrap 4 beta

另请注意，d-block d-xl-none可以替换为d-*-block，d-*-inline等。具体取决于元素的显示类型。有关display classes in beta

的更多信息

Answer 2

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

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

Answer 3

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

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

首先考虑一下，因为它分为三个有序组。（当某些组不适用时，请忽略该组）

(hide_lower_limit) (display_size) (hide_upper_limit)

(hide_lower_limit)：只有一个类.d-none
(display_size)：可见（不隐藏）的大小，例如：.d-sm-block，.d-md-block。格式为.d-<size>-block
(hide_upper_limit)：应该隐藏的上限。格式为.d-<size+1>-none

让我们看一些示例

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

ans：

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

然后考虑所有应该隐藏的屏幕尺寸，即所有屏幕尺寸

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

d-done d-md-block

第二季度：在sm和更小的屏幕上显示。

ans： (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中可见。

ans： (display_size)：.d-sm-block .d-md-block。

隐藏的屏幕尺寸

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

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

Answer 4

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

所以我最终做到了这一点：

从bootstrap和

导入mixins和variables

＆＃13;

@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;
    }
  }
}

＆＃13;

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

4 个答案: