Element Plus 的栅格

📐 基本概念

• el-col：表示一列（Column），通常和 el-row 搭配使用。

• span：指定列在一行中占多少格（总格数默认是 24）。

  • 例如：<el-col :span="12"> 表示占据一半宽度。

📱 响应式属性（xs / sm / md / lg / xl）

Element UI 提供了响应式断点属性，类似于 Bootstrap 的栅格系统：

🧩 用法区别

• span：固定占比，不管屏幕大小。

  <el-col :span="12">固定占一半</el-col>
  

• xs/sm/md/...：根据屏幕宽度动态调整占比。

  <el-col :xs="12" :sm="12" :md="6">
    响应式列
  </el-col>
  

  含义：

  • 在 手机屏幕（xs）时，占 12 格（半屏）。

  • 在 平板屏幕（sm）时，占 12 格（半屏）。

  • 在 桌面屏幕（md）时，占 6 格（四分之一屏）。

🎯 总结

• span 是 统一的宽度设置。

• xs/sm/md/... 是 响应式宽度设置，可以根据不同设备屏幕大小自动调整布局，更适合做自适应页面。