用 overflow-x-auto + d-flex 可实现轻量横向滚动卡片列表：容器加 d-flex flex-nowrap overflow-x-auto，卡片加 flex-shrink-0 并显式设宽（如 style="width:280px;"），避免使用 col 类或 JS 插件。
用 overflow-x-auto + d-flex 实现横向滚动卡片列表
bootstrap 5 默认不提供“横向滚动卡片组”组件，但可以用原生 css 能力快速拼出来。核心是让容器设为 display: flex 且禁止换行，再通过 overflow-x: auto 触发横向滚动 —— 这比 js 滚动库轻量、兼容性好、无额外依赖。
常见错误是直接套用 row 和 col：它们基于 Grid 布局，默认竖向堆叠、强制换行，根本不会横向滚动。
- 容器加
class="d-flex flex-nowrap overflow-x-auto"（flex-nowrap必须，否则卡片会折行） - 每张卡片用
class="flex-shrink-0"防止被压缩变形（尤其含图片或固定宽高的卡片） - 给容器加
scrollbar-gutter: stable或自定义滚动条样式，避免滚动时内容跳动（可选但推荐）
卡片宽度控制：用 width 还是 flex-basis？
横向滚动卡片的宽度必须显式设定，否则在不同屏幕下行为不可控。Bootstrap 的 col 类无效，因为它们依赖父级 row 的 Grid 上下文；这里要用内联样式或自定义类。
- 推荐用
style="width: 280px;"或class="w-250"（需自己定义.w-250 { width: 250px; }）—— 简单、直观、不依赖 Flex 计算逻辑 - 避免只设
flex-basis（如flex: 0 0 280px），除非你明确需要卡片在空间富余时拉伸（通常不需要） - 如果卡片内容高度不一，加
align-items-start到容器上，防止顶部不对齐
移动端适配：为什么小屏下卡片挤成一条线？
横向滚动在小屏上容易因卡片太宽导致无法滑动，或出现水平方向溢出（overflow-x: hidden 被父级截断）。关键不是“让卡片变小”，而是“让滚动本身可用”。
- 确保滚动容器父级没有
overflow: hidden（比如某些 Bootstrapcontainer或card默认样式） - 小屏下可改用更窄卡片：
class="w-200 d-sm-flex"配合媒体查询，或用min-width: 0配合text-truncate控制文字溢出 - iOS Safari 对
overflow-x: auto的 touch 行为较弱，建议加class="-webkit-overflow-scrolling: touch"（实际写成style="-webkit-overflow-scrolling: touch;"）提升滑动手感
遇到 Uncaught TypeError: Cannot read property 'offsetWidth' of null 怎么办？
这个错误和 Bootstrap 无关，通常是误用了 JS 插件（比如 Swiper、Owl Carousel）试图接管一个还没渲染完或结构不匹配的容器。横向滚动布局本身不需要 JS —— 如果你只是想滚动，删掉初始化代码即可。
- 检查是否在 DOM 加载前就执行了 JS 获取元素（
document.querySelector('.card-scroller')返回null） - 确认 HTML 结构中容器确实存在且 class 名拼写正确（比如写成
card-scoller就会失败） - 如果真需要 JS 功能（如自动定位、滚动监听），优先用原生
element.scrollLeft和scroll事件，别硬套重型轮播插件
横向滚动卡片最脆弱的一环其实是容器外层的样式污染 —— 比如某个父级 card-body 设了 overflow: hidden，或者用了 container-fluid 但没清除默认 padding。调试时先用浏览器 DevTools 检查滚动容器的 computed overflow 和 width。
