大佬教程收集整理的这篇文章主要介绍了Bootstrap 4:隐藏的可见Cols?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
添加此答案是因为接受的答案中的注释太长且不完整。如前所述,这些hIDden-*
类在bootstrap 4 beta中不再存在。
“ hIDden-sm-DOWN到底是什么?”
它不再存在于beta中,而是以前的版本,它的意思是“隐藏在小巧的外壳上”。含义,隐藏在xs
和上sm
,否则可见。
如果要在bootstrap 4中的特定层(断点)上隐藏元素,请相应地使用d-*
显示类。请记住xs
是默认的断点(总是隐含的),除非被 较大的
断点覆盖。由于xs
暗含,您将不再使用该中-xs-
缀。例如,不是d-xs-none
,而是d-none
。
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-up
= d-none
(与相同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
(与相同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
(仅)= d-block d-xl-none
visible-xs
(仅)= d-block d-sm-none
visible-sm
(仅)= d-none d-sm-block d-md-none
visible-md
(仅)= d-none d-md-block d-lg-none
visible-lg
(仅)= d-none d-lg-block d-xl-none
visible-xl
(仅)= d-none d-xl-block
另外请注意,d-*-block
可以根据元素的显示类型将其替换为d-*-inline
,d-*-flex
等。测试版中的更多展示类
我想知道为什么以下内容不起作用-xs隐藏在xs视图中。我觉得这与Bootstrap
v4中引入的更改有关,但是我想知道与在CSS中相比,在此代码中仍然可以实现这一点吗?我正在使用默认的bootstrap.css文件。
<div class="container">
<div class="row">
<div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12">
Some text here.
</div>
</div>
以上是大佬教程为你收集整理的Bootstrap 4:隐藏的可见Cols?全部内容,希望文章能够帮你解决Bootstrap 4:隐藏的可见Cols?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。