Layout 布局 ​

通过基础的 24 分栏，迅速简便地创建布局。

基础布局 ​

使用列创建基本网格布局。

分栏间隔 ​

支持列间距。

混合布局 ​

通过结合基础的 1/24 分栏，可以形成更复杂的混合布局。

分栏偏移 ​

你可以指定列偏移量。

对齐方式 ​

默认使用 flex 布局来对分栏进行灵活的对齐。

响应式布局 ​

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

用于隐藏元素的类 ​

此外，Element Plus 提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加到任何 DOM 元素或自定义组件上。 如果需要使用以下类名，您需要导入相应的 CSS 文件：

import 'element-plus/theme-chalk/display.css'

这些类是：

• hidden-xs-only - 仅在超小屏幕下隐藏
• hidden-sm-only - 仅在小屏幕下隐藏
• hidden-sm-and-down - 在小屏幕及以下尺寸的屏幕上隐藏
• hidden-sm-and-up - 在小屏幕及以上尺寸的屏幕上隐藏
• hidden-md-only - 仅在中等屏幕下隐藏
• hidden-md-and-down - 在中等屏幕及以下尺寸的屏幕上隐藏
• hidden-md-and-up - 在中等屏幕及以上尺寸的屏幕上隐藏
• hidden-lg-only - 仅在大屏幕下隐藏
• hidden-lg-and-down - 在大屏幕及以下尺寸的屏幕上隐藏
• hidden-lg-and-up - 在大屏幕及以上尺寸的屏幕上隐藏
• hidden-xl-only - 仅在超大屏幕下隐藏

Row API ​

Row 属性 ​

Row 插槽 ​

Col API ​

Col 属性 ​

Col 插槽 ​

来源 ​

文档