显示隐藏(Visibility)

根据窗口的宽度显示/隐藏内容

显示 #

你可以使用以下显示类之一:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

例如,下面是is-flex如何工作的:

Class Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
is-flex-mobile Flex Unchanged Unchanged Unchanged Unchanged
is-flex-tablet-only Unchanged Flex Unchanged Unchanged Unchanged
is-flex-desktop-only Unchanged Unchanged Flex Unchanged Unchanged
is-flex-widescreen-only Unchanged Unchanged Unchanged Flex Unchanged

要在特定断点之前或从该断点开始显示的类

is-flex-touch Flex Flex Unchanged Unchanged Unchanged
is-flex-tablet Unchanged Flex Flex Flex Flex
is-flex-desktop Unchanged Unchanged Flex Flex Flex
is-flex-widescreen Unchanged Unchanged Unchanged Flex Flex
is-flex-fullhd Unchanged Unchanged Unchanged Unchanged Flex

对于其他显示选项,只需将is-flex替换为 is-block is-inline is-inline-block or is-inline-flex

隐藏 #

Class Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
is-hidden-mobile Hidden Visible Visible Visible Visible
is-hidden-tablet-only Visible Hidden Visible Visible Visible
is-hidden-desktop-only Visible Visible Hidden Visible Visible
is-hidden-widescreen-only Visible Visible Visible Hidden Visible

隐藏到特定断点或从特定断点隐藏的类

is-hidden-touch Hidden Hidden Visible Visible Visible
is-hidden-tablet Visible Hidden Hidden Hidden Hidden
is-hidden-desktop Visible Visible Hidden Hidden Hidden
is-hidden-widescreen Visible Visible Visible Hidden Hidden
is-hidden-fullhd Visible Visible Visible Visible Hidden

其他可见性帮助程序 #

is-invisible 添加隐藏的可见性
is-hidden 隐藏元素
is-sr-only 直观地隐藏元素,但保持元素在屏幕占位。

返回头部

问题反馈
返回顶部