要让list-group显示边框，需在外容器加border类并在每个list-group-item上加border-0以避免重叠；颜色可用border-{color}或自定义CSS，粗细需用style或自定义类；嵌套卡片时应避免双边框冲突。
如何让 list-group 显示边框
默认的 bootstrap list-group 是无边框的，只靠上下间距和悬停/选中状态区分项。要加边框，核心是覆盖默认的 border 和 border-radius 样式。
最直接的做法是给 list-group 元素添加 border，同时把子项 .list-group-item 的上下 border 去掉，避免重复叠加：
<ul class="list-group border"> <li class="list-group-item border-0">Item 1</li> <li class="list-group-item border-0">Item 2</li> </ul>
-
border类（如border、border-primary）作用于外容器，提供整体边框 -
border-0必须加在每个.list-group-item上，否则默认有border-bottom，会和外层边框重叠、变粗 - 如果需要圆角，用
rounded或rounded-2等类，但注意它会影响所有角——外层加，内项通常不加
list-group-item 边框颜色和粗细怎么调
Bootstrap 的边框工具类（border、border-top 等）默认使用 $border-color 变量，也就是浅灰。想改颜色或粗细，不能只靠内置类，得配合自定义 CSS 或更细粒度的工具类。
- 颜色：用
border-{color}（如border-info）可快速换色，但仅限主题色；非主题色需写style="border-color: #5d4037"或自定义 CSS - 粗细：没有
border-2这种内置类（Bootstrap 5.3+ 仍只有border和border-0），必须用style="border-width: 2px"或自定义类 - 方向控制：用
border-top、border-bottom等单独控制某一边，比全边框更灵活，比如只想要分隔线效果
为什么加了 border 但列表项之间还有缝隙
这不是边框问题，是 .list-group-item 默认带 margin-bottom: 0 但外层 .list-group 有 border-radius 和 padding，视觉上容易误判为“缝隙”。真正常见原因有两个：
- 多个
.list-group-item相邻时，Bootstrap 默认给除最后一个外的所有项加border-bottom，如果你没清掉，又在外层加了border，就会出现双线 - 用了
rounded类但没同步应用到所有项——外层圆角 + 内项直角，会在角落露出白边，像漏缝 - 解决办法：统一用
border-0清空内项边框，并确保rounded只加在外层容器上
在卡片（card）里嵌套带边框列表组要注意什么
卡片自带 border 和 border-radius，再往里面塞一个带边框的 list-group，很容易变成“边框套边框”，显得笨重且违背卡片语义。
- 推荐做法：去掉
list-group自身的border，只保留.card-body的 padding 和.list-group-item的border-bottom（或用mb-2控制间距） - 如果坚持要内外双边框，至少把
list-group的border-radius设为0，避免和卡片圆角冲突 - 响应式下注意：某些断点下
card的border会变细，而list-group的边框不变，可能造成视觉不一致
边框不是越多越好，关键看信息层级——列表项之间的分隔，往往一条细线或一点间距就够了。强行加外边框，反而模糊了「列表」这个组件的本意。
