.list-group-flush是Bootstrap 5官方推荐的标准解法，可一次性移除列表组外层边框、圆角及内边距干扰，保持语义与交互不变，兼容性好且无副作用。
直接加 .list-group-flush 类就能去掉边框和圆角，这是 Bootstrap 5 官方提供的标准解法，不是 hack，也不用写额外 CSS。
为什么 .list-group-flush 是首选
这个类会一次性移除所有默认边框（包括 border-bottom、border-radius 和内边距干扰），同时保持语义结构和交互逻辑不变。它不是靠 border: none 强覆盖，而是通过重置 Bootstrap 内部的边框相关变量实现的，所以兼容性好、无副作用。
-
.list-group-flush必须加在<ul class="list-group"></ul>这个外层容器上，不能只加在<li>上 - 它会自动清空每个
.list-group-item的border-bottom和border-radius，不需要再手动加border-0 - 如果列表里用了
.list-group-item-action或.active，这些状态样式仍正常工作，只是没了边框干扰 - 注意：加了
.list-group-flush后，.list-group-item之间不再有视觉分隔线，如需保留分隔效果，得自己加border-bottom或用hr
border-0 单独用在 .list-group-item 上为什么不推荐
单独给每个 <li class="list-group-item border-0"> 加 border-0 只能清除项自身的边框，但无法处理外层 .list-group 的 border-radius 和 padding 带来的视觉残留，容易出现“顶部/底部漏白”或“圆角不匹配”。
-
border-0不影响.list-group自身的边框（它默认没边框，但有border-radius） - 如果你之前手动给
.list-group加过border类，那border-0对子项无效——边框还在外层 - 多个
border-0并列写，HTML 显得冗余，且一旦漏掉某一项，就会突兀地冒出一条底线 - 更麻烦的是：当配合
.active使用时，.list-group-item.active默认还会叠加一层边框色（#0d6efd），border-0压不住它，必须额外覆盖 CSS
需要部分保留边框时怎么微调
比如只要顶部有边框、或者只在激活项加边框，就不能依赖 .list-group-flush 全局清除，得用自定义规则收口。
- 想只在第一个
.list-group-item加顶边框：.list-group-item:first-child { border-top: 1px solid #dee2e6; } - 想让
.active项显示单侧边框（比如左侧高亮）：.list-group-item.active { border-left: 3px solid #dc3545; border-radius: 0; }，记得同步设border-radius: 0避免圆角裁剪 - 若用 Sass 编译项目，直接改变量更干净：
$list-group-border-color: transparent;，这样所有边框源头就没了 - 别用
!important去覆盖.list-group-flush的效果——它本身优先级已足够，强行覆盖反而会让后续维护混乱
真正容易被忽略的是：去掉边框后，.list-group-item 之间的垂直间距会变“紧”，因为原本的 border-bottom 也承担了一部分视觉呼吸感。如果内容密集，建议补一点 margin-bottom 或用 gap（在 display: flex 容器下）来维持可读性。
