显示
显示辅助器允许您控制内容的显示，会根据当前的视野或实际的元素显示类型来作为可见性的条件。
| Device | Code | Types | Range |
|---|---|---|---|
| phone_iphoneExtra small | xs | small to large handset | < 600px |
| tabletSmall | sm | small to medium tablet | 600px > < 960px |
| laptopMedium | md | large tablet to laptop | 960px > < 1264* |
| desktop_windowsLarge | lg | desktop | 1264 > < 1904px* |
| tvExtra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
可见性
有条件地显示基于当前视野的元素。这些类使用格式hidden-{breakpoint}-{condition}
断点（breakpoint） 设置视野大小:
xs- 格外小的设备sm- 小型设备md- 中型设备lg- 大型设备xl- 格外大的设备
条件（condition） 适用于基于以下前置条件的类:
only- 仅通过xl断点将元素隐藏在xs上and-down- 在指定的断点处隐藏元素，并通过lg断点向下隐藏元素and-up- 通过lg断点隐藏指定断点上的元素，并使sm上升
Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.
Overflow
Set the overflow for an element with overflow-{axis}-hidden or simply overflow-hidden.
overflow-hidden- hide overflow on both the x and y axisoverflow-y-hidden- hide overflow on the y axisoverflow-x-hidden- hide overflow on the x axis
显示
指定元素的display属性。这些类可以使用d-{display}格式定义。
d-inline-flex- 将元素显示属性设置为inline-flexd-flex- 将元素显示属性设置为flexd-inline-block- 将元素显示属性设置为inline-blockd-block- 将元素显示属性设置为blockd-inline- 将元素显示属性设置为inlined-none- 将元素显示属性设置为none
示例
Resize your screen to see the elements conditionally hide.