.list-group 默认不能横向滑动，因其采用 column 方向 flex 布局且子项 block 堆叠；需加 flex-row、flex-nowrap 和 overflow-x-auto 才能实现横向滚动，并注意 white-space、图片约束及 ios 惯性滚动兼容。
为什么 .list-group 默认不能横向滑动
Bootstrap 5 的 .list-group 是块级、垂直堆叠的容器，内部 .list-group-item 默认用 display: block + flex-direction: column（父容器是 flex，但方向为 column），所以它天生不支持横向排列或滚动。直接加 overflow-x: auto 没用——因为子项没被拉平，宽度撑满父容器，根本不会溢出。
必须用 flex-row + flex-nowrap 打平布局
横向滑动的前提是让所有 .list-group-item 在一行内排列且不换行。Bootstrap 5 提供了现成的工具类，不用写额外 CSS：
- 给
.list-group加flex-row（等价于flex-direction: row） - 必须加
flex-nowrap，否则在窄屏下仍可能折行，导致滚动失效 - 再加
overflow-x-auto（不是overflow-auto，后者会同时作用于 y 轴） - 可选：加
py-0或my-n1微调上下间距，避免滚动条被内边距截断
<div class="list-group flex-row flex-nowrap overflow-x-auto py-0"> <a href="#" class="list-group-item list-group-item-action">Item 1</a> <a href="#" class="list-group-item list-group-item-action">Item 2</a> <a href="#" class="list-group-item list-group-item-action">Item 3</a> <!-- 更多项... --> </div>
移动端滚动体验差？得手动加 -webkit-overflow-scrolling: touch
iOS Safari 和旧版 Android WebView 默认对 overflow-x 容器禁用惯性滚动，滑起来卡顿或无法拖拽。只靠 Bootstrap 类解决不了，必须补 CSS：
- 在包裹容器上加自定义 class，比如
list-group-horizontal-scroll - 配一条样式：
.list-group-horizontal-scroll { -webkit-overflow-scrolling: touch; } - 注意：该属性已废弃但仍是 iOS 必需的“开关”，现代 Chrome/Firefox 不需要，但加上无害
- 别忘了设
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }隐藏滚动条，否则 UI 显得笨重
内容过宽导致横向滚动卡死？检查 .list-group-item 的 white-space
如果列表项里有长文本、URL 或未约束的内联元素，flex-shrink: 1（默认）会让它们压缩变形甚至撑破容器，破坏滚动逻辑：
- 给每个
.list-group-item加flex-shrink-0，禁止压缩 - 对内部文本加
text-truncate（自动省略）或white-space: nowrap+overflow: hidden - 避免在
.list-group-item内用table或grid布局——它们会干扰 flex 行为 - 若含图片，务必设
max-width: 100%和height: auto，否则图片原始尺寸会强制拉宽整行
横向滑动的真正难点不在“怎么加滚动”，而在“怎么不让内容破坏 flex 行流”。很多人卡在加了 flex-row 还是滚不动，八成是子项被文本或图片撑开了，或者忘了 flex-nowrap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
