Element Plus 的 el-col 的xs、sm、md、lg、xl的使用

Element Plus 的 el-col 组件通过 xs、sm、md、lg、xl 五个属性来实现响应式布局，对应不同屏幕尺寸的列宽设置。这些属性的值表示在对应尺寸下占用的网格数（总网格数为 24）。

响应式尺寸划分

  xs：超小屏幕（<576px），如手机竖屏

  sm：小屏幕（≥576px），如手机横屏

  md：中等屏幕（≥768px），如平板

  lg：大屏幕（≥992px），如小笔记本

  xl：超大屏幕（≥1200px），如桌面显示器

使用说明:

1、基础用法：通过给 el-col 添加 xs、sm、md、lg、xl 属性来设置对应屏幕的列宽

<el-col xs="8" sm="6" md="4" lg="3" xl="2"></el-col>

2、特殊值：

1）24：占满整行宽度

2）0：在对应屏幕尺寸下隐藏该列

3）可以使用对象形式设置更复杂的布局（如偏移、排序）：

<el-col 

  :xs="{ span: 8, offset: 2 }"  // 超小屏幕：宽度8，偏移2

  :sm="{ span: 6 }"            // 小屏幕：宽度6

></el-col>

3、配合 el-row：

1）gutter 属性：设置列之间的间距（单位 px）

2）justify 属性：设置水平对齐方式（start/end/center/space-around/space-between）