Bootstrap栅格换行异常不是bug，而是盒模型（box-sizing被覆盖）、Flex行为（flex-wrap错乱）或HTML结构（违反container→row→col规则）被干扰的必然结果；需检查box-sizing是否全局设为border-box、.row是否意外启用flex-nowrap、以及.col-*是否严格作为.row直接子元素。
Bootstrap栅格换行异常不是“bug”，而是盒模型、Flex行为或HTML结构被意外干扰后的必然结果；核心问题通常出在 box-sizing 被覆盖、.row 的 flex-wrap 状态错乱，或嵌套层级违反 container → row → col 规则。
检查并锁定 box-sizing: border-box 是否生效
加个 border 或 padding 就换行？八成是 box-sizing 没守住。Bootstrap 所有 .col-* 都按 border-box 计算宽度，一旦某个父容器（比如 .card、form 或第三方组件）设了 content-box，padding 和 border 就会额外撑开，单行总宽轻松超 100%。
- 打开 DevTools，选中错位的
.col-md-6，看 Computed 面板里box-sizing值——不是border-box就得追根溯源 - 全局重置必须放在 CSS 入口最顶部：
*, *:before, *:after { box-sizing: border-box; } - 禁用
!important覆盖：任何* { box-sizing: content-box !important }都会直接废掉整套栅格 - 调试时别用
border，改用outline: 1px dashed #007bff——它不占布局空间，不影响宽度计算
确认 .row 的 flex-wrap 行为是否符合预期
.row 默认是 flex-wrap: wrap，但你可能无意中加了 flex-nowrap，或用了 .row-cols-* 却又强行锁死单行，导致列被硬塞、溢出、横向滚动。
- 检查 HTML 中是否误写了
class="row flex-nowrap"或内联样式style="flex-wrap: nowrap" -
.row-cols-5不等于“禁止换行”——它只是“每行最多 5 列”，仍会自动换行；只有同时加flex-nowrap才真不换，但代价是水平溢出 - 真要单行展示（如时间轴），必须配
overflow-x-auto，否则窄屏下内容被压缩到不可读 - 响应式断点（如
.col-md-6）在flex-nowrap下依然生效，但百分比宽度会在小屏下被强行压窄，容易引发文字重叠
验证 HTML 结构是否严格遵循三层嵌套
多个 .row 嵌套、.col-* 直接丢在 .container 外、或用 form / section 打断 .row 的直接子元素关系，都会让 Flex 上下文丢失，.col-* 退化为普通块级元素，换行逻辑彻底失效。
- 正确结构只有一条路径：
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> - 动态渲染时，循环单位必须是
.col-*，而不是整个.row—— 否则每条数据都新建一行，列数永远 ≤1 - 避免在
.row内直接包裹<form></form>；每个卡片应各自包<form></form>，确保.col-*是.row的直接子元素 - 缺少
.container或.container-fluid会导致.row的负外边距（margin: 0 -15px）失去抵消对象，列间距翻倍、右侧溢出
Safari 旧版本（12–14）的 Flex 换行缺陷
不是你代码写错了，是 Safari 对 flex-wrap: wrap 的实现有 bug：当同行 .col-* 高度差异大时，它会错误计算换行位置，导致下一行“被顶高”或列宽压缩，视觉上像错位。
- 现象典型：一个
.col-4放长卡片（320px 高），相邻.col-4只有一行文字（60px 高），整行却按 320px 渲染，下一行从该高度底部开始 - 别依赖
min-width: 0强制换行——Safari 13.1 及更早版本对它的解析不稳定 - 稳妥写法：显式拆开
flex属性，给.row加flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
并补上align-content: flex-start - 高度相关问题（如
h-100失效）需确保父级有明确高度来源，.row不能只靠min-height: auto
最常被忽略的点是：问题往往不出在 .col-* 本身，而出在它上面两层——一个被重置了 box-sizing 的卡片容器，或一个被 form 包裹而断裂的 .row。修之前先用 DevTools 逐层点开 computed styles，比猜快得多。
