Bootstrap 5 的 .list-group-horizontal 类专用于水平排列列表项，必须加在 根元素上，支持响应式断点（如 -sm、-md），自动调整内边距、圆角和分隔线方向，避免手动 flex 布局导致的样式丢失与响应式失控。
Bootstrap 5 的 .list-group 确实支持水平排列，但必须用 .list-group-horizontal
不是加个 flex-row 或改 display 就行——Bootstrap 5 内置了专用类，直接生效且响应式友好。它会自动调整内边距、圆角、分隔线方向，避免手动覆盖样式引发的错位。
常见错误现象包括：列表项仍垂直堆叠、左右间距异常、激活态（.active）背景不贴合、在小屏幕断点下没回退为垂直布局。
-
.list-group-horizontal必须加在<ul class="list-group"></ul>根元素上，不能只加在子项上 - 默认在所有断点都水平；如需仅在中屏及以上水平，改用
.list-group-horizontal-md（或-sm/-lg等） - 水平时
.list-group-item的padding-left和padding-right会自动减半（由$list-group-item-padding-x变量控制），避免整体过宽 - 如果用了
.list-group-flush，水平模式下会丢失左右边框，但顶部/底部边框仍保留——这不是 bug，是设计行为
.list-group-horizontal 在不同断点下的行为差异
它不是简单开关，而是按 Bootstrap 5 的栅格断点做条件渲染。比如 .list-group-horizontal-sm 表示“从 sm 起水平，xs 仍垂直”，这对移动端优先的布局很关键。
性能影响几乎为零，因为只是 CSS 类切换，不触发 JS 或重排；但要注意：若同时使用自定义 flex 调整（如 justify-content: space-between），可能和内置 margin 逻辑冲突。
- 断点类名必须完整匹配，
.list-group-horizontal-md不会响应lg断点的样式变化 - 多个断点类可共存，例如
.list-group-horizontal-sm .list-group-horizontal-lg表示 sm→md 垂直，lg→xl 水平 - 水平模式下，
.list-group-item.active的左右圆角会被重置为 0，这是为了连贯性——如果你需要保持圆角，得额外写 CSS 覆盖
为什么不用 Flex 手动实现？容易踩的坑有哪些
手动设 display: flex + flex-direction: row 看似简单，但会绕过 Bootstrap 对 .list-group 的全部语义化增强逻辑，导致：
-
.list-group-item.disabled的指针事件和透明度失效 -
.list-group-item-action的悬停/焦点状态样式丢失 - 响应式断点完全失控，无法随视口自动切回垂直
- 与
.list-group-numbered或.list-group-item-primary等修饰类产生样式冲突
更隐蔽的问题是：Bootstrap 5 的 .list-group 默认设了 overflow-anchor: none 来优化滚动锚定，手动 flex 会丢掉这个优化，在长列表中滑动体验变差。
水平 List Group 的实际适用场景和限制
它适合导航类短列表（如工具栏、标签页切换、操作按钮组），不适合长内容或含复杂嵌套的项（比如带图片+多段文字的卡片）。因为水平空间有限，内容易折行或溢出。
兼容性没问题：所有现代浏览器（Chrome 90+、Firefox 89+、Safari 15.4+、Edge 91+）均支持，但注意 iOS Safari 15.6 之前对 gap 在 flex 容器中的处理有偏差——而 Bootstrap 5 的水平 list-group 已避开 gap，改用 margin 控制间距，所以实际影响极小。
真正容易被忽略的是：水平 list-group 不支持嵌套子列表（.list-group inside .list-group-item），一旦嵌套，内部子项会强行撑开父容器高度，破坏水平流。如需层级结构，应换用 .nav + .nav-tabs 或自定义 dropdown。
