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