Bootstrap 5 栅格错位主因是结构断层：.col-* 必须为 .row 直接子元素，缺失 .row 或被 form/div 等标签包裹会导致 Flex 失效、列不占位或挤成一列；嵌套时需加 mx-n3 抵消 padding，且子列总宽≤12。

Bootstrap 5 栅格错位几乎从不源于框架本身 bug，而是结构断层、嵌套越界或模型混用——直接检查 .container → .row → .col-* 是否严格三层嵌套，以及有没有 form、div 或浮动类意外插在中间。

为什么 .col-* 写对了却“不占位”或“挤成一列”

根本原因是 .row 缺失或被遮挡：.col-* 必须是 .row 的**直接子元素**，否则 Flex 布局逻辑完全失效。常见现象包括列宽度归零、左右多出 15px 空白、响应式断点失效。

• 漏写 .row：
  内容
  → 列无负边距抵消，直接外溢
• .row 被块级标签包裹：
  ...
  → 若 section 有 padding 或 margin，会干扰栅格流
• PHP/JS 循环中把 form 放在 .row 内但 .col-* 外：
  ...
  → .col-4 不再是 .row 的子元素，Flex 容器失去控制权

form 标签导致列错位的修复方式

表单不是“不能放”，而是必须收进单个 .col-* 内部——每个需要独立提交的卡片/模块，都该有自己的 form，且该 form 是 .col-* 的直接子元素。

• 错误写法：
  ...

  ...
• 正确写法：
  ...

  ...
• 若需统一提交（如筛选表单），应脱离栅格：把 form 放在 .container 顶部或底部，不要和 .row 混在同一层级

嵌套 row 时列间出现多余空白

这是父级 .col-* 的 padding 和子级 .row 的 margin 未对齐所致，不是样式没加载，而是抵消不完整。

VPS Bootstrap

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

下载

• 必须给嵌套的 .row 加 mx-n3（Bootstrap 5）：
  ...
• 别用 ml-n3 mr-n3 —— 响应式断点下可能只生效一边，造成左右不对称
• 检查子列总宽 ≤ 12：.col-8 .col-8 会强制换行，即使加了 mx-n3 也无效
• 禁用所有自定义 CSS 后仍错位？用 Chrome DevTools 的 “Layout” 面板确认 padding 和 margin 实际值是否严丝合缝

高度不一致导致下一行“被顶起”

.row 的 align-items: stretch 只作用于本行，不会约束下一行起始位置。某列内容过高，会把整行撑高，下一行紧贴其后渲染，视觉上就是“断层”。

• 不要给 .col-* 直接加 height: 100% —— 它不继承 .row 的计算高度
• 可行方案：.row 上设 min-height: 200px + 子 .col 加 h-100 d-flex flex-column，再对正文区加 flex-grow-1
• 更轻量做法：用 .card { height: 100% } + .card-body { flex-grow: 1 }，前提是父 .col 有 d-flex flex-column h-100
• 避免 card-deck —— Bootstrap 5.3+ 已废弃，且它不解决跨行等高问题

最常被忽略的其实是 g-* 间距类和 .container 的 padding 叠加效应：比如 .container.p-4 里塞一个 .row.g-3，视觉上列就缩进又缩进。错位排查，永远先看这两处。