layui列偏移通过layui-col-md-offset*类实现，本质是添加margin-left使列向右空出1～12个栅格单位；需满足同行列占比+偏移≤12，否则换行；支持xs/sm/md/lg/xl多断点响应式偏移。

layui 的列偏移通过 layui-col-md-offset* 类实现，本质是给列元素添加左边距（margin-left），使其向右“空出”指定数量的栅格列，从而达到居中、右对齐或错位布局的效果。关键在于理解“偏移值”的含义和使用限制。

偏移值代表什么

偏移值 * 是一个 1～12 的整数，表示该列**向右跳过多少个栅格单位**（即 1/12 宽度）。例如：

• layui-col-md-offset4 → 向右空出 4 列宽度（约 33.33%）
• layui-col-md-offset8 → 向右空出 8 列宽度（约 66.67%），常用于右对齐单列

必须满足的约束条件

在同一行（layui-row）内，所有列的 占比数 + 偏移数之和不能超过 12，否则会自动换行。例如：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• ✅ 正确：layui-col-md4 layui-col-md-offset4 → 4 + 4 = 8 ≤ 12，能显示在一行
• ❌ 错误：layui-col-md8 layui-col-md-offset6 → 8 + 6 = 14 > 12，该列将被挤到下一行

响应式偏移要选对断点前缀

偏移类名中的 md 表示只在「中等及以上屏幕」（≥992px）生效；小屏下偏移会失效，列自动堆叠。如需不同屏幕适配，可组合多个断点：

• layui-col-xs-offset1 layui-col-md-offset3 → 手机端偏移 1 列，桌面端偏移 3 列
• 支持的断点：xs（≤767px）、sm（≥768px）、md（≥992px）、lg（≥1200px）、xl（≥1600px）

实际用法示例

让一个 4 列宽的内容块在桌面端居中显示（左右各空 4 列）：

<div class="layui-row">
  <div class="layui-col-md4 layui-col-md-offset4" style="background:#009688;">居中内容</div>
</div>

此时：4（自身占位）+ 4（左侧偏移）= 8，剩余 4 列在右侧留白，视觉上即居中。