您可以使用下列 display
类之一:
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
例如,这是 is-flex
辅助类如何工作的:
自适应辅助类
根据不同的视口宽度来显示(隐藏)内容
您可以使用下列 display
类之一:
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
例如,这是 is-flex
辅助类如何工作的:
类 |
移动设备 上至 768px
|
平板 从 769px 到 1023px
|
桌面系统 从 1024px 到 1215px
|
宽屏 从 1216px 到 1407px
|
巨屏1408px 及以上
|
---|---|---|---|---|---|
is-flex-mobile
|
Flex | 无变化 | 无变化 | 无变化 | 无变化 |
is-flex-tablet-only
|
无变化 | Flex | 无变化 | 无变化 | 无变化 |
is-flex-desktop-only
|
无变化 | 无变化 | Flex | 无变化 | 无变化 |
is-flex-widescreen-only
|
无变化 | 无变化 | 无变化 | Flex | 无变化 |
类显示上至或从一个特定断点开始 |
|||||
is-flex-touch
|
Flex | Flex | 无变化 | 无变化 | 无变化 |
is-flex-tablet
|
无变化 | Flex | Flex | Flex | Flex |
is-flex-desktop
|
无变化 | 无变化 | Flex | Flex | Flex |
is-flex-widescreen
|
无变化 | 无变化 | 无变化 | Flex | Flex |
is-flex-fullhd
|
无变化 | 无变化 | 无变化 | 无变化 | Flex |
至于其他显示选项,只需用 is-block
、is-inline
、is-inline-block
或者 is-inline-flex
替换 is-flex
即可
类 |
移动设备 上至 768px
|
平板 从 769px 到 1023px
|
桌面系统 从 1024px 到 1215px
|
宽屏 从 1216px 到 1407px
|
巨屏1408px 及以上
|
---|---|---|---|---|---|
is-hidden-mobile
|
隐藏 | 显示 | 显示 | 显示 | 显示 |
is-hidden-tablet-only
|
显示 | 隐藏 | 显示 | 显示 | 显示 |
is-hidden-desktop-only
|
显示 | 显示 | 隐藏 | 显示 | 显示 |
is-hidden-widescreen-only
|
显示 | 显示 | 显示 | 隐藏 | 显示 |
类隐藏上至或从一个特定断点开始 |
|||||
is-hidden-touch
|
隐藏 | 隐藏 | 显示 | 显示 | 显示 |
is-hidden-tablet
|
显示 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
is-hidden-desktop
|
显示 | 显示 | 隐藏 | 隐藏 | 隐藏 |
is-hidden-widescreen
|
显示 | 显示 | 显示 | 隐藏 | 隐藏 |
is-hidden-fullhd
|
显示 | 显示 | 显示 | 显示 | 隐藏 |
is-invisible |
添加可视性之隐藏 |
is-hidden |
隐藏元素 |
is-sr-only |
隐藏元素的显示但要保证元素对于屏幕阅读器可见 |
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容