bootstrap栅格不生效的首要原因是html结构不合规，必须严格遵循container→row→col三层嵌套；常见错误是缺失row或错置container，导致flex上下文丢失、宽度计算失效。
Bootstrap栅格不生效，先查HTML结构是否合规
不是CSS没加载，而是.container → .row → .col三层嵌套被破坏。常见错误是直接把.col塞进.container里，或者在.row里套了.container——这会让.row失去flex上下文，.col的flex: 0 0 auto和宽度计算全部失效。
- 用开发者工具选中任意
.col元素，在Styles面板确认是否出现flex相关声明（如flex-basis: 50%、max-width: 50%）；没有就说明结构断层 -
.row必须是.container或.container-fluid的**直接子元素**，.col必须是.row的**直接子元素** - 避免在
.row上加display: block或float: left等覆盖样式，Bootstrap 5 的.row依赖display: flex
移动端布局错乱，重点盯viewport和mobileResponsive
没<meta name="viewport">，Bootstrap所有响应式断点（.col-md-6、.d-lg-none）全失效。iOS Safari会按980px渲染，md断点根本不会触发。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在最顶部，前面不能有JS、注释、模板变量 - 如果是
bootstrap-table，启用mobileResponsive: true后仍错位，检查minWidth是否设得过小（默认562px），建议调至768适配平板 - 表格列溢出时，别只加
table-responsive，还要给<th>/<code><td>设<code>white-space: normal和word-break: break-all，否则长文本撑破容器列对齐/高度不一致，别硬调
margin-top.row默认align-items: stretch，不是居中。强行给.col加mt-auto没用，因为父容器没设高度，也没开启flex主轴控制。- 垂直居中：在
.row上加align-items-center，同时确保.row有足够高度（比如min-height: 200px或min-height: 100vh） - 单列内部居中：改用
d-flex flex-column justify-content-center，比依赖整行高度更可靠 - Bootstrap 3项目别强加
display: flex到.row，它会破坏float栅格逻辑；改用position: relative+position: absolute; top: 50%; transform: translateY(-50%)
旧CSS和Bootstrap 5混用，冲突根源在布局模型
旧代码用
float: left+width: 33.333%，Bootstrap 5用display: flex，两者混用会导致.row高度塌陷、列间距翻倍、响应式类失效。- 检查DevTools中
.row的computeddisplay值：如果是flex，但子元素有float，就是模型打架 - 无法重构HTML时，用
.legacy-grid包裹旧区块，里面重置：.legacy-grid [class*="col-"] { float: none; flex: 0 0 auto; } - 想彻底绕开冲突，启用Bootstrap 5.2+的CSS Grid方案：Sass中设
$enable-cssgrid: true，然后用.g-col-*替代.col-*，它不依赖.row，天然兼容老结构
最易被忽略的是：所有修复都建立在“CSS已正确加载”前提下。如果
.col在Styles面板里压根没出现Bootstrap规则，优先查CDN链接是否404、本地路径是否拼错、bootstrap.min.css是否被其他同名文件覆盖——再细的对齐调整，也救不回没加载的样式表。 - 垂直居中：在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
