列间距错乱源于less编译与浏览器解析的双重失配，需从percentage()精度、calc()单位缺失、栅格生成逻辑三处同步校准：统一用round(percentage(1/@grid-columns),4)控制精度；calc()变量必须显式带单位；各断点独立定义列数并匹配偏移公式；浮动布局应改用flex/grid+gap。
列间距错乱不是 CSS 渲染 bug，而是 Less 编译期计算 + 浏览器运行时解析的双重失配导致的。核心得从 percentage() 精度、calc() 单位缺失、以及栅格类生成逻辑三处同时校准。
为什么 percentage(1 / @grid-columns) 会累加超 100%
Less 的 percentage() 对小数不友好：比如 percentage(1/12) 输出 8.333333333333334%，12 个相加实际是 100.00000000000002%，浏览器 layout 阶段截断后可能变成 99.999%，最后一列被迫换行。这不是视觉误差，是真实宽度溢出。
- 必须统一用
round(percentage(1 / @grid-columns), 4)强制保留 4 位小数，再参与后续乘法 - 别在循环里写
width: (100% / @cols) * @i—— 先算基准单列宽：@col-width: round(percentage(1 / @grid-columns), 4)，再写width: ~"(@{col-width} * @{i})" - 所有列数控制必须通过变量
@grid-columns: 12，禁止硬编码12或1/12
calc() 里用 Less 变量时为什么间距消失
编译后出现 calc(100% - 24) 这种无单位表达式，浏览器直接忽略整条声明。根源是变量定义没带单位，比如 @gutter: 24 而不是 @gutter: 1.5rem。
- 所有用于
calc()的变量必须显式带单位：@gutter: 1.5rem，不能靠后期拼接 - 更稳妥的做法是封装校验 mixin：
.gutter-calc(@val) when (unit(@val) = rem) { width: calc(100% - @val); } - 调用时传
.gutter-calc(1.5rem)，避免裸值入参
响应式断点下偏移（.offset-*）和推拉（.push-*）类为何失效
偏移和推拉不是单纯加 margin-left 或 left，它依赖当前断点下的列宽基准。用 xs 断点的 @grid-columns-xs: 12 算出的 .col-md-offset-3，宽度必然不对 —— 因为 md 断点可能用的是 @grid-columns-md: 16。
- 每个断点必须独立定义列数变量：
@grid-columns-sm: 12; @grid-columns-md: 16; - 偏移公式应为：
margin-left: (100% / @grid-columns-md) * @n + @grid-gutter-width / 2（补半边槽宽，抵消.row负 margin） -
.push-*必须配合position: relative容器，单独使用无效；且必须和列宽类共存，如.col-md-6.col-md-push-3
浮动栅格里“看起来”列间距不稳，其实根本没在控制间距
浮动布局中所谓“列间距”，本质是靠 margin-right 模拟的视觉假象。一旦子项高度不一致，右侧就会出现不可控空白——这不是 margin 错了，是浮动流断裂了。
- 必须用
:not(:last-child)清除末项冗余：.item:not(:last-child) { margin-right: 12px; } - 宽度计算要预留 margin 空间：
width: calc(33.333% - 12px)，不能写33.33% - 父容器必须触发 BFC：
overflow: hidden或display: flow-root，否则负 margin 会被吞掉 - 真正稳定的方案是放弃 float ——
display: flex; gap: 12px;或display: grid; gap: 12px;天然抗高度差异
最常被忽略的一点：栅格系统里的“间距”从来不是独立属性，它必须和列宽、断点、容器行为捆绑校准。少校准其中一环，错乱就藏在看似正常的代码里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
