Bootstrap 5 中 list-group 默认不支持横向排列，官方已移除 .list-group-horizontal 类；应改用 nav + nav-pills 替代，语义清晰、响应式友好且原生支持横纵切换。
Bootstrap 5 怎么让 ListGroup 横向排列？
Bootstrap 5 的 ListGroup 默认是垂直堆叠的，要横向排布，不能靠 CSS 写 flex-direction: row 硬改——那样会破坏边框、圆角和间距逻辑。正确方式是直接用内置的 list-group-horizontal 类，加在 <ul class="list-group"> 上即可生效。
注意：该类只在 ≥md 断点生效（即屏幕宽度 ≥768px 时才横排），小屏自动回退为垂直。如需全尺寸横排，得额外覆盖响应式类：list-group-horizontal-sm 或 list-group-horizontal + 自定义媒体查询。
list-group-horizontal 和 list-group-horizontal-md 有啥区别？
它们本质是同一套响应式逻辑的不同断点入口。Bootstrap 5 把横向布局封装成一系列断点类：
-
list-group-horizontal=list-group-horizontal-md（文档里明确等价） -
list-group-horizontal-sm：≥576px 横排 -
list-group-horizontal-lg：≥992px 横排 -
list-group-horizontal-xl：≥1200px 横排
选哪个取决于你的最小横排宽度需求。比如移动端也想横排三个 item，就得用 list-group-horizontal-sm；如果只希望平板及以上横排，用默认的 list-group-horizontal 就够了。
横向 ListGroup 里加 btn 或 disabled 项会出问题吗？
会，但不是崩溃级错误，而是样式错位。横向模式下，list-group-item 的左右 border 和 padding 被重置，但 btn 类自带 margin 和 border，容易撑开或覆盖相邻项。
稳妥做法是避免混用：
- 不要给
list-group-item同时加btn类——用list-group-item-action替代，它提供悬停/聚焦态且不干扰布局 -
disabled状态在横向模式下仍有效，但视觉灰度可能不够明显，建议额外加opacity: 0.6或pointer-events: none - 若必须嵌按钮，把
<button>放进list-group-item内部，而非让它自己当list-group-item
为什么加了 list-group-horizontal 但还是竖着？
最常见三个原因：
- 没写在最外层容器上——必须加在
<ul class="list-group">标签本身，而不是父 div 或某个list-group-item - 用了旧版 HTML 结构，比如用
<div class="list-group">包裹<a>，而 Bootstrap 5 官方推荐结构是<ul><li class="list-group-item">，否则响应式类不触发 - 自定义 CSS 强制设置了
flex-direction: column !important或覆盖了.list-group-horizontal的 flex 声明
检查浏览器开发者工具里，.list-group 元素是否真实应用了 display: flex 和 flex-direction: row，如果没有，优先排查类名位置和 HTML 结构合法性。
横向排列的细节比看起来多——尤其是响应式断点和嵌套交互元素的兼容性，稍不注意就回退成竖排或者间距崩掉。
