Bootstrap响应式网格必须严格使用.container→.row→.col三层嵌套结构，缺一不可；.col类需按.col-{断点}-{份数}格式设置，总和≤12，并配合.g-*和.text-center等工具类优化间距与对齐。
直接用 .container + .row + .col 三件套，就能在几秒内搭出响应式网格——不需要写媒体查询，也不用算百分比。
必须套三层结构：container → row → col
Bootstrap 网格不是“加个 class 就行”，它依赖严格的嵌套层级。漏掉任意一层，列会塌陷、间距错乱、断点失效。
-
.container或.container-fluid是最外层，负责宽度控制和居中；没它，.row的负边距会溢出 -
.row必须是.col的直接父级；放错位置（比如.col直接塞进.container）会导致左右间距消失 -
.col类不能单独存在——哪怕只是想让内容自动均分，也得包在.row里
用 .col 类名控制断点和列宽
类名格式是 .col-{breakpoint}-{number}，其中 {breakpoint} 决定“从哪个尺寸开始生效”，{number} 是占 12 列中的几份。
- 不带断点的
.col：在所有尺寸下都等宽（flex: 1），适合简单均分 -
.col-sm-6：小屏（≥576px）起占一半，更小屏幕（xs）会垂直堆叠成单列 -
.col-md-4 .col-lg-3：中屏占 4/12，大屏缩为 3/12，留出空间给其他列 - 混用时注意总和≤12——比如
.col-sm-8 .col-sm-4合理，但.col-sm-7 .col-sm-7会强制换行
别忽略 .g- 间距类和 .text-center 对齐类
默认列之间有 1.5rem 水平间距（gutter），但这个值对移动端常太大，容易挤窄内容；垂直对齐也容易被忽略，导致文字贴顶或错位。
-
.g-0：彻底去掉行列间距（适合卡片紧贴、全图横幅） -
.g-2到.g-5：提供预设间距阶梯，比手动写 CSS 更快且一致 -
.text-center放在.row上，能让所有.col内文字居中——比每个列里重复加更省事 - 对齐类如
.align-items-center要加在.row上才生效，加在.col上无效
Bootstrap 5.3 的 .grid + .g-col- 是新选项，但别贸然替换
新版 CSS Grid 布局（.grid 容器 + .g-col-4 子项）确实更简洁，但它和传统 Flexbox 网格不兼容，也不能和 .row/.col 混用。
- 如果你项目已用
.row/.col，强行切到.grid会导致样式断裂、JS 组件（如 Carousel）错位 -
.grid不支持响应式断点类（没有.g-col-md-6这种写法），必须靠媒体查询或 JS 补充 - 仅建议新项目、纯展示页、或需要深度嵌套子网格时尝试；日常快速布局仍首选
.row/.col
真正卡住人的往往不是语法，而是容器没闭合、.row 被套在另一个 .row 里、或者在小屏上忘了测试堆叠顺序——写完务必用浏览器 DevTools 切换设备尺寸看实际表现。
