Bootstrap 5 中应优先用 d-flex flex-column gap-X 调整 list-group 垂直间距，因默认 display: block 不支持 gap；list-group-flush 需显式设 flex 才生效，避免直接加 margin 破坏语义或被覆盖。

Bootstrap 5 中如何调整 list-group-item 的垂直间距

默认的 list-group 项之间没有外边距（margin-bottom），视觉上紧贴在一起。想拉开间距，不能靠手动加 margin 破坏组件语义，而应优先用 bootstrap 自带的间距工具类。

• 直接在每个 list-group-item 上加 mb-2、mb-3 等——简单但冗余，且破坏列表项的“无间距”设计意图
• 更推荐给整个 list-group 容器加 gap-3（仅限 Flex 布局）：需确保父容器是 d-flex flex-column，否则 gap 不生效
• 若用的是 list-group-flush（去边框版本），它会移除所有 border 和默认 border-radius，但依然不加 gap；此时必须显式设置 display: flex + gap 才能生效

为什么给 list-group 加 gap 有时无效

因为 Bootstrap 5 的 list-group 默认是 display: block，而 gap 只对 flex 和 grid 容器有效。常见失效场景：

• 直接写
  → 无效，gap 被忽略
• 正确写法：
• ...
• 注意：list-group-item 内部有 padding，增大 gap 同时可能让整体高度突兀，建议搭配 py-2 或 py-1 微调内边距

兼容旧版 Bootstrap 4 的方案

Bootstrap 4 没有 gap 工具类，也不能依赖 Flex 布局自动分隔。只能退回到传统方式：

• 给每个 list-group-item 加 mb-2（最后一个除外），或用 CSS 选择器：.list-group-item:not(:last-child) { margin-bottom: 1rem; }
• 避免用 margin-bottom: 1rem !important，否则和 list-group-flush 的样式冲突（它会重置 margin-bottom）
• 如果项目混用 BS4/BS5，建议抽离成自定义类如 list-group-spaced，统一控制逻辑，避免散落的工具类污染 HTML

用 CSS 覆盖时最容易踩的坑

直接写 .list-group-item { margin-bottom: 1.5rem; } 看似简单，但要注意：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• list-group-flush 会把 margin-bottom 设为 0，你的规则会被覆盖，必须提高权重：.list-group-flush .list-group-item 或加 !important
• 响应式需求下，不同断点要不同间距？工具类本身支持响应式（如 mb-md-3），但自定义 CSS 需手动写媒体查询
• 如果列表项里有按钮、表单控件等交互元素，过大的 margin 可能导致点击热区断裂，建议优先用 padding 扩展可点区域，而非纯靠外边距撑开

真正要改间距，先看是否能用 d-flex gap-X 解决；不行再考虑覆盖样式——但得盯紧 flush 和响应式行为，这两处最容易漏掉。