box-sizing: border-box 被覆盖会导致 bootstrap 栅格列宽计算错误，因 padding 和 border 被计入总宽，引发换行错位；.row 负外边距失效、嵌套列偏差、响应式断点异常等均源于此，根本解法是确保 * { box-sizing: border-box; } 全局生效且不被覆盖。
box-sizing: border-box 被覆盖会导致列宽计算错误
Bootstrap 所有 .col-* 类都依赖 box-sizing: border-box 计算宽度：padding 和 border 不撑大元素总宽。一旦全局或局部 CSS 把某个父容器、卡片、表单控件设为 box-sizing: content-box，那该容器内的 .col-* 就会「多出」 padding 或 border 的像素，导致整行宽度超 12 栅格，触发换行错位。
常见触发点：
-
input、textarea、select等原生表单控件在某些浏览器（如旧版 Safari）默认是content-box - 第三方 UI 库（如某些日期选择器、富文本编辑器）重置了
box-sizing - 自定义 CSS 写了
* { box-sizing: content-box !important }—— 这条会直接废掉 Bootstrap 栅格
验证方式：打开开发者工具，选中错位的 .col-4 元素，看 Computed 面板里 box-sizing 值是不是 border-box；如果不是，往上逐层检查父元素的样式来源。
.row 的负外边距失效常因 box-sizing 错乱
.row 能抵消 .col-* 的左右 15px padding，靠的是自身 margin: 0 -15px。但如果 .row 或其某个祖先元素被设为 content-box，它的 margin 就可能被意外压缩或继承异常，导致抵消失败——结果就是列之间出现双倍间隙，或者右侧溢出视口。
实操建议：
- Bootstrap 官方要求的重置必须存在：
* { box-sizing: border-box; }，且不能被!important覆盖 - 若项目已用其他框架，优先在入口 CSS 顶部加
@import或<style></style>强制重置：*, *:before, *:after { box-sizing: border-box; } - 避免对
.row或.col-*直接写box-sizing，它们已有 Bootstrap 内置规则，重复设置反而易冲突
嵌套时子 .col-* 的 box-sizing 继承链更脆弱
嵌套结构如 .col-8 > .row > .col-4 中，如果中间某层（比如卡片容器 .card）被设了 box-sizing: content-box，它会把 padding 当作「内容区额外宽度」来算，导致内部 .row 的负 margin 无法完全抵消——子列实际宽度 = 4/12 × (父列宽 − 左右 padding)，但 Bootstrap 按「父列宽」算，偏差立刻出现。
典型现象：
- 嵌套后右侧卡片突然被挤到下一行，但检查宽度显示“刚好 100%”
- 同一行三张卡片，中间那张略窄，鼠标 hover 时发现内边距渲染不一致
- 移动端堆叠正常，但平板横屏（
sm）下错位，说明box-sizing在响应式断点切换时被条件样式覆盖
排查重点不是“有没有设 border-box”，而是“在哪一层被悄悄改回 content-box”。尤其注意 CSS 自定义属性（--bs-body-font-size 等）和 scoped style 的作用域泄漏。
为什么移除 width: 17em 后错位反而好了？
这不是巧合。固定宽度（如 width: 17em）会绕过 Bootstrap 的栅格宽度计算逻辑，而 box-sizing: content-box 又会让这个固定宽度「额外加上 padding」。比如卡片设了 padding: 1rem + width: 17em + box-sizing: content-box，真实占用宽度 ≈ 17em + 2rem，远超 .col-4 分配的理论宽度。移除 width 后，元素退回到栅格控制，只要 box-sizing 正确，就能自动适配。
所以真正要盯住的，永远是那条最基础的规则：
* { box-sizing: border-box; } 必须生效、不可覆盖、全链路一致——漏掉这一条，后面所有栅格类都在裸奔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
