Bootstrap 4栅格失效主因是.row与.col-父子关系被破坏：.col-必须为.row直接子元素，否则Flex失效致竖排；嵌套时需在内层.row加mx-n2抵消padding，断点须显式声明最小尺寸如col-12 col-md-6。
Bootstrap 4 栅格系统失效，90% 是因为 .row 和 .col-* 的父子关系被破坏——不是 CSS 没加载，也不是类名写错，而是 HTML 结构没满足「.row 必须直接包裹 .col-*」这个硬性前提。
为什么 .col-* 不横排、全堆成一列
根本原因：.col-* 不是 .row 的直接子元素。Bootstrap 4 的 .row 依赖 display: flex + margin: 0 -15px 来激活栅格行为，但它只对**直接子元素**生效。
- 错误结构：
<div class="row"><form><div class="col-6">...</div></form></div>→.col-6是<form>的子元素，.row完全“看不见”它 - 正确结构：
<div class="row"><div class="col-6">...</div><div class="col-6">...</div></div> - 浏览器 DevTools 里检查
.row的 computed 样式，确认display: flex存在，且.col-*元素的flex-basis是计算值（如50%），不是auto
嵌套时空白过大或右侧溢出
外层 .col-* 的 padding: 0 15px 和内层 .row 的 margin: 0 -15px 没抵消干净——漏加 mx-n2 类就是直接原因。
-
mx-n2是 Bootstrap 4 的专用负边距工具类（对应margin: 0 -0.5rem），必须加在**嵌套的.row上**，不是父.col-*，也不是最外层.row - 混用 Bootstrap 5 的
mx-n3会导致负边距值错位（-1remvs-0.5rem），视觉上仍有一圈白边 - 如果父
.col-*被设了max-width或overflow: hidden，再加mx-n2可能触发横向滚动条，需同步检查父容器限制
响应式断点不生效、小屏下还横排
断点类（如 col-md-6）不是叠加生效，而是“覆盖式回退”：没写 col-*，就默认用最小断点（即手机尺寸）的 col-12；写了但没匹配当前视口宽度，就会回退到上一级。
立即学习“前端免费学习笔记（深入）”；
- 常见误写：
col-md-6 col-lg-4→ 手机尺寸下变成col-12（全宽），不是消失或无效 - 正确写法应显式声明最小断点：
col-12 col-md-6 col-lg-4 - 嵌套内层也要独立写断点：
<div class="col-md-8"><div class="row"><div class="col-12 col-sm-6">.../div></div>，否则小屏下子列可能过挤 - Chrome 切换设备模拟器后，右键检查元素，看
flex-basis是否随断点变化，比肉眼判断更可靠
表单、卡片等组件插入后布局塌陷
<form>、<section>、<div class="card"> 这类块级容器插在 .row 和 .col-* 之间，会切断直接子元素链路，导致栅格逻辑彻底失效。
- 错误：
<div class="row"><form><div class="col-6">...</div></form></div> - 正确：每个
.col-*内部单独包<form>，确保.col-*始终是.row的直接子元素 - 卡片结构也同理：
<div class="col-4"><div class="card">...</div></div>，别多套一层无关<div> - 调试时临时删掉所有自定义 CSS 和 JS，只留 Bootstrap 4 官方 CSS，确认是不是第三方样式干扰了
display: flex或flex-basis
最容易被忽略的是：每一层嵌套都必须重置布局上下文——漏掉任何一个 .row，或少加一个 mx-n2，整层就脱离栅格约束，而这种错位在小屏或内容动态增减时才突然暴露。
