显示隐藏（Visibility）

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

1

显示 #

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

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`	直观地隐藏元素，但保持元素在屏幕占位。

23222