如何在Bootstrap中实现列表组List-group的横向排列-Bootstrap教程-PHP中文网

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

如何在bootstrap中实现列表组list-group的横向排列

Bootstrap 5 中 `list-group` 默认不支持横向排列

Bootstrap 官方的 list-group 组件从 v5 开始彻底移除了 .list-group-horizontal 类（v4 里有，但 v5 删了），所以直接加这个 class 不起作用，页面不会变横向，也不会报错——这是最常被卡住的地方。

根本原因不是写法错了，而是 Bootstrap 5 认为横向列表更接近「导航」或「按钮组」语义，不再归入 list-group 的设计范畴。

别在 <ul class="list-group"></ul> 上硬加 flex-row 或 flex-nowrap —— 它会破坏 list-group-item 的边框、圆角和间距逻辑
如果只是想让几个条目并排，list-group 本身不是最优解；优先考虑 nav + nav-pills 或 btn-group
v4 升级到 v5 时，这个改动容易被忽略，查文档发现没这 class，就以为是自己漏写了

用 `nav` + `nav-pills` 替代是最稳妥的横向方案

它语义清晰、样式可控、响应式友好，且原生支持横向（默认就是）和纵向（加 flex-column）切换。

适合场景：菜单项、标签切换、功能入口卡片组等需要点击/选中的横向列表。

nav-pills 比 nav-tabs 更轻量，无下划线，圆角更明显，视觉上更接近传统 list-group-item
如需去掉底边距或调整间隙，直接覆盖 .nav-pills .nav-link 的 margin-right 即可，比改 list-group 的嵌套结构简单得多
移动端默认堆叠？加 flex-wrap 或用响应式类如 flex-sm-nowrap 控制

强行用 `list-group` 横向？可以但得手动重置样式

仅建议用于必须保留 list-group-item 语义（比如服务端渲染已固定结构、或依赖其 ARIA 属性）的特殊情况。

VPS Bootstrap

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

下载

核心是绕过默认的 flex-direction: column，并修复 item 之间的 border 和 padding 冲突。

项目一
项目二
项目三

然后加自定义 CSS：

.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal .list-group-item {
  margin-right: 0.5rem;
  border-radius: 0.375rem;
  border-right: 1px solid rgba(0,0,0,0.125);
}
.list-group-horizontal .list-group-item:last-child {
  border-right: none;
}

不加 flex-direction: row，list-group-horizontal 这个 class 就是空壳
border-right 是为了模拟原 list-group 的左右分隔，否则所有 item 看起来像粘在一起
别用 justify-content: space-between —— item 宽度不一致时会导致间距难控，用 margin-right 更可靠