<el-col

### Element UI `el-col` 使用方法 #### 基本概念 `el-col` 是 Element UI 的列组件，用于定义网格系统的列。该组件通常与 `el-row` 配合使用，以构建灵活的响应式布局[^2]。 #### 主要属性 - **span**: 定义每列占据的宽度比例，默认情况下总共有 24 列。例如设置 span="12" 表示占一半宽度。 - **offset**: 设置偏移量，即当前列左侧留白多少个单位宽。 - **push/pull**: 控制列的位置移动，分别向右/左推拉若干单位长度。 - **xs/sm/md/lg/xl**: 对应不同屏幕尺寸下的自适应配置对象，允许针对各种设备设定不同的跨度和偏移值[^3]。 #### 实际应用案例 下面是一个简单的例子展示如何利用这些特性创建多样的页面结构： ```html <template> <div id="app"> <!-- 创建两列均分 --> <el-row :gutter="20"> <!-- gutter 属性控制间距 --> <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <!-- 不同断点下表现各异 --> <el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <!-- 添加偏移效果 --> <el-row :gutter="20"> <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6" :offset="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> </div> </template> <style scoped> .grid-content { min-height: 36px; } .bg-purple { background-color: #d3dce6; } .bg-purple-light { background-color: #e5e9f2; } </style> ``` 此代码片段展示了三种常见的场景：基础的双栏平铺、跨屏适配以及带有位移特性的布局方式[^1]。