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 的权重太高了，优秀的个人博客帖都检索不到。
支持我
