Bootstrap与CSS Grid布局的结合使用-Bootstrap教程-PHP中文网

grid容器不能直接套在bootstrap的.row里，因.row默认为flex布局，外层加display:grid会破坏.col的flex排列逻辑，导致列宽错乱、间距异常甚至塌缩；正确做法是用grid替代.row，移除flex相关类，显式设置grid-template-columns并复用bootstrap断点与gap变量。

bootstrap与css grid布局的结合使用

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">，改用 <code><div class="my-grid"> <li>保留 <code>.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 同步。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

`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，但可被 $spacer Sass 变量影响，别硬编码数值

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 覆盖，最后连哪段样式在起作用都难定位。