如何解决CSS里Less写栅格系统时列间距错乱的问题？

列间距错乱源于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%，最后一列被迫换行。这不是视觉误差，是真实宽度溢出。

1. 必须统一用 round(percentage(1 / @grid-columns), 4) 强制保留 4 位小数，再参与后续乘法
2. 别在循环里写 width: (100% / @cols) * @i —— 先算基准单列宽：@col-width: round(percentage(1 / @grid-columns), 4)，再写 width: ~"(@{col-width} * @{i})"
3. 所有列数控制必须通过变量 @grid-columns: 12，禁止硬编码 12 或 1/12

calc() 里用 Less 变量时为什么间距消失

编译后出现 calc(100% - 24) 这种无单位表达式，浏览器直接忽略整条声明。根源是变量定义没带单位，比如 @gutter: 24 而不是 @gutter: 1.5rem。

1. 所有用于 calc() 的变量必须显式带单位：@gutter: 1.5rem，不能靠后期拼接
2. 更稳妥的做法是封装校验 mixin：.gutter-calc(@val) when (unit(@val) = rem) { width: calc(100% - @val); }
3. 调用时传 .gutter-calc(1.5rem)，避免裸值入参

响应式断点下偏移（.offset-*）和推拉（.push-*）类为何失效

偏移和推拉不是单纯加 margin-left 或 left，它依赖当前断点下的列宽基准。用 xs 断点的 @grid-columns-xs: 12 算出的 .col-md-offset-3，宽度必然不对 —— 因为 md 断点可能用的是 @grid-columns-md: 16。

1. 每个断点必须独立定义列数变量：@grid-columns-sm: 12; @grid-columns-md: 16;
2. 偏移公式应为：margin-left: (100% / @grid-columns-md) * @n + @grid-gutter-width / 2（补半边槽宽，抵消 .row 负 margin）
3. .push-* 必须配合 position: relative 容器，单独使用无效；且必须和列宽类共存，如 .col-md-6.col-md-push-3

浮动栅格里“看起来”列间距不稳，其实根本没在控制间距

浮动布局中所谓“列间距”，本质是靠 margin-right 模拟的视觉假象。一旦子项高度不一致，右侧就会出现不可控空白——这不是 margin 错了，是浮动流断裂了。

1. 必须用 :not(:last-child) 清除末项冗余：.item:not(:last-child) { margin-right: 12px; }
2. 宽度计算要预留 margin 空间：width: calc(33.333% - 12px)，不能写 33.33%
3. 父容器必须触发 BFC：overflow: hidden 或 display: flow-root，否则负 margin 会被吞掉
4. 真正稳定的方案是放弃 float —— display: flex; gap: 12px; 或 display: grid; gap: 12px; 天然抗高度差异

最常被忽略的一点：栅格系统里的“间距”从来不是独立属性，它必须和列宽、断点、容器行为捆绑校准。少校准其中一环，错乱就藏在看似正常的代码里。