.list-group-flush 是 Bootstrap 5 官方标准解法，作用于外层 ul 容器，清空边框、圆角和内边距，保留语义与交互；单独给 li 加 border-0 无法消除容器留白，易致视觉异常。
.list-group-flush 是 Bootstrap 5 官方提供的标准解法，不是临时补丁，也不需要写额外 CSS —— 加上它，边框、圆角、内边距干扰一次性清空，语义和交互完全保留。
为什么直接加 .list-group-flush 就行，而不是每个 .list-group-item 加 border-0
因为 .list-group-flush 作用于外层容器（.list-group 自身的 border-radius 和 padding，同时让每个 .list-group-item 的 border-bottom 和 border-radius 归零。而单独给每个 加 border-0 只能干掉项自身的底边框，但外层容器的圆角和上下留白还在，视觉上容易出现“顶部漏白”或“底部突兀收尾”。
-
.list-group-flush必须加在上 - 加了之后，
.list-group-item.active的默认蓝色左侧边框（#0d6efd）依然生效，不会被意外覆盖 - 如果之前手动给
.list-group加过border类，得先去掉——.list-group-flush不会覆盖外层边框，它只处理自身体系内的边框变量
.list-group-flush 对 .list-group-item-action 和 .active 的影响
悬停、点击、激活状态样式全部照常工作，只是没了默认的底边框分隔线。也就是说：.list-group-item-action:hover 背景色变化、.list-group-item.active 的背景色和文字色都正常，唯一变化是视觉上更“贴平”。
- 如果你依赖
border-bottom做分隔，加了.list-group-flush后这些线就消失了，需手动补（比如用border-bottom: 1px solid #dee2e6） -
.list-group-item.active默认还会加一层左侧边框（border-left: 3px solid #0d6efd），这个不受.list-group-flush影响，仍会显示 - 若用了
.list-group-horizontal，.list-group-flush依然有效，但会清除水平方向的边框和圆角，注意是否符合布局预期
想保留部分边框时，怎么绕过 .list-group-flush 的全局清除
一旦你只需要首项顶边框、或只在 .active 项加单侧高亮，.list-group-flush 就不合适了——它不支持条件式清除，只能全有或全无。
- 只给第一项加顶边框：
.list-group-item:first-child { border-top: 1px solid #dee2e6; } - 让
.active项显示左侧高亮且去掉圆角：.list-group-item.active { border-left: 3px solid #dc3545; border-radius: 0; } - 用 Sass 项目？直接改变量更彻底：
$list-group-border-color: transparent;，编译后所有边框源头消失，比类名控制更干净 - 别用
!important去覆盖.list-group-flush的效果——它的 CSS 优先级已足够，硬覆盖只会让后续调试变混乱
真正容易被忽略的是：加了 .list-group-flush 后，.list-group-item 之间的垂直节奏靠的是 margin-bottom，而不是边框分隔；如果项目里还叠加了自定义 margin 或 flex 布局，可能造成项间距异常，得检查是否需要微调 margin 或用 gap 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
