Bootstrap 5 中 .list-group-horizontal 不起作用是因为官方已彻底移除该类，认为横向列表属导航语义，推荐改用 nav + nav-pills；若硬要保留 list-group，则需手动设置 display: flex、flex-direction: row，并修复 border、padding 及间距问题。
Bootstrap 5 为什么 list-group-horizontal 不起作用
因为 Bootstrap 5 已彻底移除 .list-group-horizontal 类——这不是你写错了，而是官方主动废弃。它认为横向排列的列表本质上属于导航或按钮组语义，不再归入 list-group 的设计范畴。强行复用旧类名会完全失效，控制台也无报错，容易误判为 CSS 覆盖问题。
替代方案：用 nav + nav-pills 实现真正可靠的横向列表
这是 Bootstrap 5 官方推荐路径，语义正确、响应式开箱即用、样式可控性强：
-
.nav+.nav-pills默认就是横向布局，无需额外类 - 加
.flex-column立刻切为纵向，比改list-group的嵌套结构简单得多 - 去掉 item 间间隙？直接覆盖
.nav-pills .nav-link的margin-right，不碰 border 或 padding 冲突 - 若需禁用下划线或调整 hover 背景，改
.nav-link:hover和.nav-link.active即可，不影响折叠逻辑
硬要保留 list-group？绕过 flex-direction 并修复间距
必须同时满足三个条件才能让 list-group 横向显示，缺一不可：
- 父容器加
style="display: flex; flex-direction: row;"（.d-flex不够，它默认是flex-wrap: wrap） - 每个
.list-group-item加style="flex-shrink: 0;"，否则小屏下会被压缩变形 - 手动清除默认的上下 border 和 padding 冲突：
border-bottom: 0; border-right: 1px solid #e9ecef; padding-right: 1rem; - 别用
justify-content: space-between——item 宽度不一致时，右侧空白不可控；用margin-right更稳
横向滚动列表？别在 list-group 上硬套 overflow-x
.list-group 是语义化列表容器，不是滚动容器。直接加 overflow-x: auto 在 Safari 或安卓 WebView 中极易卡顿、拖拽失灵、内容跳动：
- 正确做法：外层用独立
div包裹，设class="overflow-x-auto"+style="scrollbar-gutter: stable both-edges; -webkit-overflow-scrolling: touch;" - 内层用
class="d-flex flex-nowrap gap-2"，子项加class="flex-shrink-0" - 避免用
.col或.me-2控制子项间距——它们生成 margin，末尾多出空白导致滚动条拉不到底；gap才是栅格级可控方案 - 别给滚动容器设
height，只设max-height，否则 iOS 可能截断内容
横向排列的真正难点不在“怎么让它横过来”，而在于语义是否匹配、小屏是否退化合理、滚动是否顺滑——这些细节一旦忽略，后期维护成本远高于初期选对组件。
