负外边距是栅格对齐的底层契约，bootstrap 5 的 .row 必须带 margin-left: -0.75rem 和 margin-right: -0.75rem，与 .col 的 padding 构成硬性配对；直接写 mx-0 会破坏抵消链，导致列右偏、嵌套错位及响应式异常，安全归零水平间距唯一方式是用 gx-0。

负外边距是栅格对齐的底层契约

Bootstrap 5 的 .row 必须带 margin-left: -0.75rem 和 margin-right: -0.75rem，这不是“可选优化”，而是与 .col 的 padding-left/padding-right: 0.75rem 构成的硬性配对。没有这个负边距，.col 的内边距就会外溢，导致首尾列无法贴住 .container 边缘，整行向右偏移，甚至触发水平滚动条。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

直接写 mx-0 或 margin: 0 会破坏抵消链

常见错误是想“清掉间距”就给 .row 加 mx-0。这只会抹掉负边距，却保留 .col 的正内边距，结果是：

• 列内容整体右偏 0.75rem（视觉上左边出现白边）
• 嵌套 .row 时，内外层 padding/margin 完全脱钩，空白加倍或抵消不足
• 响应式断点切换时行为不一致——比如 col-md-6 在中屏下意外换行

真正安全归零水平间距的方式是用 gx-0，它会同步重置 .row 的负边距和所有直系 .col 的左右 padding。

唯一推荐手动用负 margin 类的两个场景

Bootstrap 官方只明确支持两种负 margin 使用方式：

• 突破父容器边界：比如 banner 图片要铺满视口，但父级是 .container，此时给外层 wrapper 加 mx-n5，而不是改 .container 或 .row
• 微调组件默认间距：如 nav-tabs 下划线太靠下，用 mb-n1 往上提；card 标题和 body 之间空太多，用 mt-n2 抵消部分 mb-3

注意：ms-n2 和 me-n3 是逻辑属性，支持 RTL，比 ml-n2/mr-n3 更可靠；响应式写法如 ms-sm-n2 只在小屏及以上生效，无需手写媒体查询。

全局调整负 margin 基准值必须改 Sass 变量

别试图通过 :root { --bs-spacer: 2rem } 让 mt-n3 变成 -2rem——mt-n1 到 mt-n5 是 Sass 编译时生成的固定值，不参与运行时计算。改了 CSS 变量，工具类还是 -1rem。真要统一调整，必须修改源码中的 $spacers 变量并重新编译 Bootstrap。否则自定义 CSS 和工具类行为会不一致，调试时容易绕晕。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！