Bootstrap网格需嵌套在.container或.container-fluid内才生效，.row和.col类依赖父容器宽度及负边距逻辑；必须“移动优先”书写断点类如.col-12.col-sm-6.col-lg-4，且避免嵌套flex干扰计算。
Bootstrap网格类名怎么写才生效
不加 .container 或 .container-fluid，所有 .row 和 .col- 都会失效——它们不是独立CSS规则，而是依赖父容器的宽度约束和负边距抵消逻辑。
常见错误是直接把 .col-6 放在 <body> 下，结果列宽撑满、间距错乱、响应断点完全不触发。
-
.container：居中定宽（如 1200px），适合内容主体 -
.container-fluid：100% 宽度，适合全屏背景或仪表盘 - 必须套一层
.row，它用margin-left: -15px抵消子列的padding-left: 15px - 列必须写全前缀，比如
.col-md-6不会自动降级到.col-6；没写.col-*的默认行为是“不设宽度”，变成 auto
为什么小屏幕下列没堆叠、还挤成一行
因为漏写了移动端基础栅格类名。Bootstrap 5 的断点从 .col-（xs）开始生效，但很多人只写 .col-md-6，导致在手机上仍按 md 规则渲染——也就是等宽并排，而不是堆叠。
正确做法是「移动优先」：先写最小屏规则，再逐级覆盖。
立即学习“前端免费学习笔记（深入）”；
- 要手机竖屏堆叠、平板横屏两栏、桌面三栏：用
.col-12 .col-sm-6 .col-lg-4 - 只写
.col-md-6= xs 和 sm 下无定义 → 浏览器按 block 元素渲染，但 Bootstrap 没给 width，实际表现是“内容宽度 + 默认 padding”，不可控 - 如果想某列在所有尺寸下都占满，就只写
.col-12，别混用其他断点类
自定义列间距（gutter）为什么不起作用
Bootstrap 5 默认 gutter 是 1.5rem（24px），但这个值只对 .row 生效，且必须通过内置间距工具类（如 .g-3）覆盖，不能靠改 padding 或 margin 手动调。
直接给 .row 加 margin: 0 或给 .col 加 padding: 0，会破坏网格对齐和断点计算逻辑。
- 调整行内间距：用
.g-0到.g-5，或响应式变体如.g-md-2 - 只调水平间距？用
.gx-3；只调垂直？用.gy-2 - 这些类名会重置
.row的margin和.col的padding，顺序不能反
Flex布局冲突导致网格错位
当你在 .col 内部又用 display: flex，或外层组件（比如 Vue/React 封装的卡片）自带 display: inline-flex，就可能让 .col 的 flex-basis 计算失准，尤其在 Safari 下容易列宽忽大忽小。
这不是 Bug，是 Flex 嵌套时主轴尺寸传递的自然结果——.col 默认是 flex: 0 0 auto，一旦父 .row 的 flex 容器属性被干扰，宽度就不按栅格走了。
- 检查开发者工具里
.col的 computedflex-basis，如果是auto而不是具体 px/%，大概率是嵌套 flex 干扰 - 临时修复：给
.col显式加flex: 0 0 50%（配合对应断点） - 长期建议：避免在
.col上再套多层 flex 容器，用.d-flex+ 工具类替代手写样式
栅格系统不是黑盒，它的每一层 class 都在参与 CSS 层叠和 Flex 计算。少一个容器、错一个前缀、多一层 flex，都可能让“自动适配”变成手动调试。
