Grid容器不能直接套在Bootstrap的.row里，因.row默认为Flex布局，外层加display:grid会破坏.col的flex排列逻辑，导致列宽错乱、间距异常甚至塌缩；正确做法是用Grid替代.row，移除Flex相关类，显式设置grid-template-columns并复用Bootstrap断点与gap变量。
Grid 容器不能直接套在 Bootstrap 的 .row 里
Bootstrap 5 的 .row 默认是 Flex 布局，自带 display: flex 和负外边距；如果在外层加 display: grid，会破坏 .row 对子元素（.col）的 flex 排列逻辑，导致列宽错乱、间距异常，甚至部分列塌缩成一行高。
正确做法是：用 Grid 替代 .row，把 .col 当作普通子元素直接放进 Grid 容器中——前提是移除所有依赖 Flex 行为的类（比如 .row、.justify-content-*）。
- 删掉
<div class="row">，改用<div class="my-grid"> - 保留
.col-*类仅用于响应式宽度（如.col-12 .col-md-6），但需确认这些类没被其他 Flex 样式干扰 - 在
.my-grid上显式设置display: grid和grid-template-columns，否则.col的宽度类不会生效
响应式断点要对齐 Bootstrap 的 $grid-breakpoints
Bootstrap 的栅格断点（xs/sm/md/lg/xl/xxl）对应的是 CSS 媒体查询临界值。如果你用 Grid 写自定义布局（比如三栏变两栏再变一栏），但媒体查询用的是 min-width: 768px，而 Bootstrap 的 md 实际是 768px（含），sm 是 576px——差 1px 就可能让 .col-md-6 在 Grid 媒体块里没触发，列宽不匹配。
建议直接复用 Bootstrap 的 Sass 变量（如果项目用 Sass），或查文档确认断点数值：
立即学习“前端免费学习笔记（深入）”；
-
xs:0（无媒体查询） -
sm:576px -
md:768px -
lg:992px -
xl:1200px -
xxl:1400px
例如写 Grid 响应式列数：@media (min-width: 768px) { .my-grid { grid-template-columns: repeat(2, 1fr); } } —— 这才和 .col-md-6 同步。
gap 与 Bootstrap 的 g-* 类混用会重复生效
Bootstrap 5 的 .g-3、.g-lg-4 等类，底层就是给容器设 gap。如果你同时给 Grid 容器加了 gap: 1rem 和 class="g-3"，最终 gap 会变成两者叠加（比如 1rem + 1rem = 2rem），间距爆炸。
实操建议只选一种方式控制间隙：
- 纯 Grid 场景：删掉所有
g-*类，用gap或row-gap/column-gap控制 - 混合场景（部分区域用 Bootstrap 栅格，部分用 Grid）：统一用
g-*，并在 Grid 区域额外加style="gap: var(--bs-gap)"复用 Bootstrap 的 CSS 变量 - 注意：Bootstrap 的
--bs-gap默认是1rem，但可被$spacerSass 变量影响，别硬编码数值
Grid 子项里的 .col 不再自动占满剩余空间
在标准 Bootstrap .row 中，没写 .col 类的子元素会默认 flex: 1，撑满剩余宽度；但在 Grid 容器里，没声明 grid-column 或 grid-area 的元素只是普通网格项，按 grid-auto-flow 顺序填格子，宽度由 grid-template-columns 决定，不会“自适应剩余宽度”。
常见翻车现场：你写了一个标题 <h2>Title</h2> 和一个 <div class="col-8">Content</div> 放进 Grid 容器，结果标题占一列、内容占一列，各 1fr，完全不是你想要的“标题独占整行，内容占 8/12”。
- 明确用
grid-column: 1 / -1让标题横跨全部列 - 给
.col-8加grid-column: span 8（前提是总列数设为 12） - 或者更稳妥：别混用语义类和 Grid 行为，把
.col-*当纯工具类，只取其 width 百分比（如width: 66.666%），再用 Grid 控制布局流
真正麻烦的是嵌套层级深的时候——Grid 容器里再套一个 Bootstrap .row，那里面又套 Grid，容易漏掉某一层的 display 覆盖，最后连哪段样式在起作用都难定位。
