Bootstrap栅格不生效的主因是结构错误、CSS未加载、断点不匹配或自定义样式覆盖；须严格遵循container→row→col三层嵌套，引入正确CSS文件，合理使用响应式类，并避免干扰flex布局的自定义样式。
Bootstrap 栅格布局不生效，通常不是框架“坏了”，而是 HTML 结构或类名使用不符合 Bootstrap 的嵌套规则。核心问题往往出在 container、row、col 三者的层级和搭配上。
必须严格遵循 container → row → col 的三层嵌套结构
Bootstrap 的栅格系统依赖 CSS 的 Flexbox 布局逻辑，row 需要父元素提供 max-width 和 padding（由 container 提供），同时自身设为 display: flex；而 col 必须是 row 的直接子元素，才能被正确计算宽度和间距。
- ❌ 错误写法：
<div class="container"><div class="col-6">内容</div></div>（缺少row） - ❌ 错误写法：
<div class="row"><div class="container"><div class="col-6">内容</div></div></div>（container放在row内部） - ✅ 正确写法：
<div class="container"><div class="row"> <div class="col-6">内容</div> <div class="col-6">内容</div> </div></div>
检查是否引入了正确的 Bootstrap CSS 文件
栅格类（如 col-6、row）全部定义在 Bootstrap 的 CSS 中，仅引入 JS 文件或 CDN 链接错误会导致样式完全不加载。
- 确认 HTML
中有有效的 CSS 引入，例如：<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> - 打开浏览器开发者工具（F12），在 Elements 面板中选中某个
col元素，查看右侧 Styles 面板是否显示flex: 0 0 auto、width: 50%等 Bootstrap 栅格相关声明 - 若样式面板里完全没出现
col-*相关规则，说明 CSS 未加载成功，优先排查网络、CDN 地址或本地路径
注意响应式类的断点匹配与浏览器视口宽度
像 col-md-6 这类带断点的类，只在对应断点及以上生效。如果页面在小屏下看不到预期布局，很可能是用了 md 却没适配 xs。
立即学习“前端免费学习笔记（深入）”；
-
col-6：所有屏幕都生效（等同于xs） -
col-sm-6：≥576px 才生效；小于该宽度会垂直堆叠（默认行为） - 建议至少设置一个基础断点（如
col-12 col-md-6），保证小屏单列、中屏双列 - 用浏览器调试工具切换设备尺寸，观察实际视口宽度是否达到你所用断点的阈值
避免自定义 CSS 意外覆盖栅格行为
常见干扰包括：给 col 设置了 float、display: block、固定 width 或 margin/padding 破坏 flex 计算。
- 检查开发者工具中
col元素的 Computed 样式，看是否有width被覆盖成非百分比值 - 慎用
!important，尤其不要对col直接设width—— 应改用更合适的栅格类（如col-4替代width: 33.33%） - 如果需要额外间距，优先用 Bootstrap 的
g-3（行内间隙）、px-3等工具类，而非手动写 margin
不复杂但容易忽略。只要结构对、资源在、断点准、无覆盖，Bootstrap 栅格就会按预期工作。
