bootstrap 5 推荐用 gap 控制列表项间距，但必须将 .list-group 设为 d-flex flex-column，否则 gap-3 无效；因默认 display: block 不支持 gap，且需清除 item 默认 margin-bottom 避免叠加，同时注意内边距对整体高度的影响。
直接改 .list-group-item 的 margin-bottom 是最常见也最容易出错的方式——它会破坏首尾视觉节奏，尤其在嵌套或卡片中更明显。Bootstrap 5 推荐用 gap 控制列表项间距，但必须确保容器是 flex 布局，否则无效。
为什么给 .list-group 加 gap-3 没反应
因为 Bootstrap 5 默认的 .list-group 是 display: block，而 gap 只对 flex 或 grid 容器生效。写了 class="list-group gap-3" 等于白写。
- ✅ 正确做法：加
d-flex flex-column显式声明布局类型，例如<ul class="list-group d-flex flex-column gap-3"></ul> - ⚠️ 注意：
.list-group-flush也会移除默认边框和圆角，但它**不自动切为 flex**，仍需手动加d-flex flex-column - ? 检查 DevTools 中
.list-group的 computeddisplay值，不是flex就别指望gap起作用
用 gap 替代 margin 时容易叠加出双倍间距
如果既保留了默认 .list-group-item 的 margin-bottom: 0.5rem，又在父级设了 gap: 0.5rem，实际间距就是 1rem，且首项顶部、末项底部各多出 0.5rem 空隙。
- ? 解决办法：统一方案，别混用。加
gap前先清掉原始 margin：.list-group-item { margin-bottom: 0; } - ? 更稳妥的是用自定义类覆盖，比如
.list-group-clean > .list-group-item { margin-bottom: 0; }，避免影响其他地方 - ? 在 DevTools 的 layout 面板打开 “show all margins”，一眼就能看出哪些 margin 还活着
需要兼容 Safari 14.1 以下或 Bootstrap 4 怎么办
Safari 14.1 之前不支持 flex gap，Bootstrap 4 的 .list-group 也不是 flex，默认靠 margin-bottom 分隔。这时只能退回传统方式，但要注意选择器精度。
- ✅ 推荐写法：
.list-group-spaced > .list-group-item:not(:last-child) { margin-bottom: 0.75rem; } - ? 避免
.list-group-item { margin-bottom: 0.75rem; }—— 末项底部会多出空隙，且和.list-group-flush冲突 - ⚡ 动态增删项时，
:not(:last-child)依然可靠；若需兼容 IE，可用.list-group-item + .list-group-item { margin-top: 0.75rem; }
真正容易被忽略的是：列表组间距调整后，.list-group-item 内部的 padding 会放大整体高度，尤其是配合 py-2 或 py-3 使用时。建议先调 gap，再微调 item 内边距，而不是反过来堆叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
