真正原因是box-sizing被改为content-box导致border额外撑宽：.col-*默认含padding，content-box下border会叠加到宽度上，使两列总宽超100%而换行；验证方法是查DevTools中Computed的box-sizing值，若为content-box即为此因。
border让.col-*突然换行的真正原因
不是栅格系统坏了，是box-sizing被悄悄改了。Bootstrap 的 .col-* 类默认带左右 padding（比如 0.75rem），而你加的 border: 1px solid 在 box-sizing: content-box 下会额外撑开宽度：实际占用 = 内容宽 + 左右 padding + 左右 border。两列 .col-md-6 原本各占 50%，加 border 后可能变成 50% + 2px，总宽超 100%，浏览器只能换行。
怎么快速验证是不是 box-sizing 搞的鬼
打开 DevTools，选中错位的 .col-md-6 元素，看 Computed 面板里的 box-sizing 值。如果显示 content-box，问题就在这。常见触发点包括：
- 项目里某处写了
* { box-sizing: content-box !important }—— 一行代码就能废掉整套栅格 - 某些 UI 库或富文本编辑器重置了全局
box-sizing - 父容器（比如
.card）被设为content-box，导致内部所有.col-*计算失准
加 border 又不想换行，6 种解法按优先级排
别硬调 width 或删 padding，从根上解决：
-
全局重置（推荐）：在 CSS 入口最顶部加
* { box-sizing: border-box; margin: 0; padding: 0; } -
临时调试用
outline：替换border为outline: 2px dashed #007bff，它不占布局空间 -
包一层内层 div：把 border 加在内容层，而不是
.col-*上，例如<div class="col-md-6"><div style="border: 1px solid #dee2e6; padding: 1rem;">内容</div></div> -
慎用
!important：局部修复时写.col-md-6 { box-sizing: border-box !important; }，但别让它污染全局
flex-wrap 和 grid 换行也受 border 影响？
影响方式不同，但根源一致：
立即学习“前端免费学习笔记（深入）”；
- 对
flex-wrap: wrap：子项若没设flex-shrink: 1，又带border和padding，iOS Safari 容易忽略换行，最后一项被挤到下一行还留大片空白 - 对 CSS Grid：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)))虽能自动换行，但若网格项自身box-sizing是content-box，且含border，实际宽度仍可能突破minmax()下限，导致列数异常 - 所有场景都绕不开一点：只要元素用了
content-box+border+padding，它的“真实宽度”就脱离了你写的百分比或minmax()控制
真正要盯住的不是 border 本身，而是它和 box-sizing 的组合效应——这个细节在嵌套结构、响应式断点、甚至 iOS Safari 里会被放大好几倍，改完记得真机测试窄屏设备。
