elementui col

ElementUI Col 组件

ElementUI 的 Col 组件是布局系统的一部分，通常与 Row 组件配合使用，用于创建响应式栅格布局。Col 基于 24 分栏设计，支持通过 span、offset、pull、push 等属性灵活控制布局。

基本用法

通过 span 属性指定分栏宽度，数值范围为 1-24。

<el-row>
  <el-col :span="12">占 12 栏</el-col>
  <el-col :span="12">占 12 栏</el-col>
</el-row>

响应式布局

支持 xs、sm、md、lg、xl 等响应式断点，适配不同屏幕尺寸。

<el-row>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">响应式分栏</el-col>
</el-row>

分栏偏移

通过 offset 属性设置分栏左侧的偏移栏数。

<el-row>
  <el-col :span="8">占 8 栏</el-col>
  <el-col :span="8" :offset="8">偏移 8 栏</el-col>
</el-row>

对齐方式

通过 type="flex" 启用弹性布局，配合 justify 和 align 属性控制对齐方式。

<el-row type="flex" justify="center">
  <el-col :span="6">居中对齐</el-col>
</el-row>

栅格间隔

通过 gutter 属性设置分栏之间的间距（单位为像素）。

<el-row :gutter="20">
  <el-col :span="12"><div style="background: #eee">分栏 1</div></el-col>
  <el-col :span="12"><div style="background: #eee">分栏 2</div></el-col>
</el-row>

自定义属性

• pull：分栏向左移动的栏数。
• push：分栏向右移动的栏数。

<el-row>
  <el-col :span="6" :push="6">向右推 6 栏</el-col>
  <el-col :span="6" :pull="6">向左拉 6 栏</el-col>
</el-row>

注意事项

• Row 和 Col 必须配合使用，单独使用 Col 无效。
• 栅格系统默认无间距，需通过 gutter 手动设置。
• 响应式断点数值为栏数，而非像素值。