栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Bootstrap 4:隐藏的可见Cols?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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
等。测试版中的更多展示类




转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/402684.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号