Bootstrap 5 中 list-group 默认不支持横向排列，官方已移除 .list-group-horizontal 类；应改用 nav + nav-pills 替代，语义清晰、响应式友好且原生支持横纵切换。

Bootstrap 5 怎么让 ListGroup 横向排列？

Bootstrap 5 的 ListGroup 默认是垂直堆叠的，要横向排布，不能靠 CSS 写 flex-direction: row 硬改——那样会破坏边框、圆角和间距逻辑。正确方式是直接用内置的 list-group-horizontal 类，加在

上即可生效。

注意：该类只在 ≥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，容易撑开或覆盖相邻项。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

稳妥做法是避免混用：

• 不要给 list-group-item 同时加 btn 类——用 list-group-item-action 替代，它提供悬停/聚焦态且不干扰布局
• disabled 状态在横向模式下仍有效，但视觉灰度可能不够明显，建议额外加 opacity: 0.6 或 pointer-events: none
• 若必须嵌按钮，把 放进 list-group-item 内部，而非让它自己当 list-group-item

为什么加了 list-group-horizontal 但还是竖着？

最常见三个原因：

• 没写在最外层容器上——必须加在
  标签本身，而不是父 div 或某个 list-group-item
• 用了旧版 HTML 结构，比如用
  包裹 ，而 Bootstrap 5 官方推荐结构是

  ，否则响应式类不触发
• 自定义 CSS 强制设置了 flex-direction: column !important 或覆盖了 .list-group-horizontal 的 flex 声明

检查浏览器开发者工具里，.list-group 元素是否真实应用了 display: flex 和 flex-direction: row，如果没有，优先排查类名位置和 HTML 结构合法性。

横向排列的细节比看起来多——尤其是响应式断点和嵌套交互元素的兼容性，稍不注意就回退成竖排或者间距崩掉。