BootStrap4 | 对于不同设备实现某一div块的自动隐藏或者显示 – [笔记]

在CSDN上看到Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。
这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
没想到按照以往的hidden-sm等类无法实现效果。BS4无法实BS3的效果。

参考像素

Class 设备
.visible-xs 额外的小设备(小于 768px)可见
.visible-sm 小型设备(768 px 起)可见
.visible-md 中型设备(768 px 到 991 px)可见
.visible-lg 大型设备(992 px 及以上)可见
.hidden-xs 额外的小设备(小于 768px)隐藏
.hidden-sm 小型设备(768 px 起)隐藏
.hidden-md 中型设备(768 px 到 991 px)隐藏
.hidden-lg 大型设备(992 px 及以上)隐藏

bs4与bs3的方法对比

终于在台湾的一个帖子中看到了新的定义,bs4需要使用一下方法才能实现

文章来源:https://poychang.github.io/visible-and-hidden-in-bootstrap-4/

BS 3 BS 4 備註
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 (same as hidden)
hidden-xs-up d-none (same as hidden)
hidden-sm-up d-sm-none
hidden-md-up d-md-none
hidden-lg-up d-lg-none
hidden-xl-up d-xl-none
hidden-xs d-none d-sm-block (only)
hidden-sm d-block d-sm-none d-md-block (only)
hidden-md d-block d-md-none d-lg-block (only)
hidden-lg d-block d-lg-none d-xl-block (only)
hidden-xl d-block d-xl-none (only)
visible-xs d-block d-sm-none (only)
visible-sm d-none d-sm-block d-md-none (only)
visible-md d-none d-md-block d-lg-none (only)
visible-lg d-none d-lg-block d-xl-none (only)
visible-xl d-none d-xl-block (only)

Ps:

这里不得不吐槽百度,所有页面都是重复的答案,csdn cnblog 的权重太高了,优秀的个人博客帖都检索不到。

— 于 共写了1165个字
— 文内使用到的标签:

发表评论

电子邮件地址不会被公开。