Bootstrap 5 中 list-group 默认不支持横向排列，官方已移除 .list-group-horizontal 类；推荐用 nav + nav-pills 替代，语义清晰、响应式友好，且原生支持横纵切换。
Bootstrap 5 中 list-group 默认不支持横向排列
Bootstrap 官方的 list-group 组件从 v5 开始彻底移除了 .list-group-horizontal 类（v4 里有，但 v5 删了），所以直接加这个 class 不起作用，页面不会变横向，也不会报错——这是最常被卡住的地方。
根本原因不是写法错了，而是 Bootstrap 5 认为横向列表更接近「导航」或「按钮组」语义，不再归入 list-group 的设计范畴。
- 别在
<ul class="list-group">上硬加flex-row或flex-nowrap—— 它会破坏list-group-item的边框、圆角和间距逻辑 - 如果只是想让几个条目并排，
list-group本身不是最优解；优先考虑nav+nav-pills或btn-group - v4 升级到 v5 时，这个改动容易被忽略，查文档发现没这 class，就以为是自己漏写了
用 nav + nav-pills 替代是最稳妥的横向方案
它语义清晰、样式可控、响应式友好，且原生支持横向（默认就是）和纵向（加 flex-column）切换。
适合场景：菜单项、标签切换、功能入口卡片组等需要点击/选中的横向列表。
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系</a>
</li>
</ul>
-
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 属性）的特殊情况。
核心是绕过默认的 flex-direction: column，并修复 item 之间的 border 和 padding 冲突。
<ul class="list-group list-group-horizontal"> <li class="list-group-item">项目一</li> <li class="list-group-item">项目二</li> <li class="list-group-item">项目三</li> </ul>
然后加自定义 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更可靠
横向列表要不要响应式？先想清楚断点需求
很多项目直接写死 flex-row，结果小屏上溢出滚动，用户得左右拖——这不是“横向排列成功”，是布局失控。
真正实用的做法是：默认纵向（利于阅读），中屏以上才横向。
- 用
flex-md-row（Bootstrap 5 响应式 flex 工具类），md 起生效，xs/sm 保持竖排 - 如果内容极少（比如 3 个图标），也可以用
flex-wrap+min-width控制换行时机 - 别依赖 JS 动态切 class，CSS 媒体查询或响应式工具类足够稳定
横向排列本身很简单，难的是判断什么时候该横、什么时候该纵，以及边界情况（如单个 item 宽度超容器）怎么兜底。这些细节不处理，上线后第一波反馈大概率就来自手机用户。
