2020-06-18 23:47:00 by wst
bootstrapbootstrap3 到 bootstrap4 的学习过程,发现显示/隐藏元素的方法变了。于是经过研究并参考google的结果,总结如下:
.d-none | 在所有屏幕下隐藏 |
.d-{sm | md | lg | xl}-none | 在指定屏幕大小下隐藏 |
.d-block | 在较小屏幕下显示 |
.d-{sm | md | lg | xl}-block | 在指定屏幕大小下显示 |
以下方法,本着认真负责的态度,都是亲测过的。
关于屏幕的尺寸和分档,参考另一篇文章。
(1)在超小屏幕下隐藏:d-none d-sm-block
(2)在超小、小屏幕下隐藏:d-none d-md-block
(3)在超小、小、中等屏幕下隐藏:d-none d-lg-block
(4)在超小、小、中等、大屏幕下隐藏:d-none d-xl-block
(5)在任何屏幕下都不显示:d-none
看到这儿,相信你已总结出规律:向下隐藏,即某个尺寸以下隐藏。
(1)在超小屏幕下显示:d-sm-none
(2)在超小、小屏幕下显示:d-md-none
(3)在超小、小、中屏幕下显示:d-lg-none
(4)在超小、小、中、大屏幕下显示:d-xl-none
这儿的规律是:某个尺寸及以上隐藏
其他一些不常用的方法,这里不在列举,请参考这篇文章。