移动端Card横向滑动需禁用默认堆叠行为：Bootstrap 5 的 .card 默认在 xs 断点下垂直堆叠，应使用 d-flex flex-nowrap overflow-x-auto 组合实现横向滚动，并为卡片设置 min-width 防止压缩变形。
移动端Card横向滑动需要禁用默认堆叠行为
bootstrap 5 的 .card 默认在 xs（.d-flex 或 .overflow-x-auto 不起作用——因为父容器（如 .row 或 .container）仍会强制换行，且卡片本身没设固定宽度和白空间处理。
必须用 d-flex + flex-nowrap + overflow-x-auto 组合
关键不是给卡片加样式，而是控制其**直接父容器**。常见错误是把 overflow-x-auto 加在 .card 上，或漏掉 flex-nowrap，导致内容被截断却不滑动。
- 父容器需设为
d-flex和flex-nowrap，阻止子元素换行 - 同一父容器加
overflow-x-auto才能触发横向滚动 - 每个
.card需设固定宽度（如flex-shrink-0+width: 280px），否则会被压缩 - 避免用
.row包裹——它自带flex-wrap: wrap，会破坏横向布局
示例结构：
<div class="d-flex flex-nowrap overflow-x-auto p-2">
<div class="card flex-shrink-0" style="width: 280px;">
<img src="..." class="card-img-top">
<div class="card-body">...</div>
</div>
<div class="card flex-shrink-0" style="width: 280px;">
...
</div>
</div>
iOS Safari 滚动卡顿？加 -webkit-overflow-scrolling
不加这句，iOS 上滑动会“顿挫”甚至失效，尤其卡片多、内容重时。这不是 Bug，是 Safari 对 overflow-x:auto 的默认优化策略。
- 必须写在启用横向滚动的容器上（即上面的
div.d-flex） - CSS 中加：
-webkit-overflow-scrolling: touch; - 仅 iOS 有效，不影响其他平台，可放心加
卡片间距怎么控制？别用 .me-3，改用 padding
用 .me-3 会导致最后一个卡片右侧多出空白，滑动到底部时留白明显。因为 margin 会撑开父容器，但父容器又设了 overflow-x:auto，视觉上很别扭。
- 改用父容器内边距：
p-2或自定义padding-left/padding-right - 卡片内部用
mx-2控制左右间隙（注意：mx是 margin-x，在 flex 容器中安全） - 或统一用
gap: 1rem（Bootstrap 5.3+ 支持），但需确认项目 Bootstrap 版本
真正容易被忽略的是：横向滑动卡片本质上绕过了 Bootstrap 的栅格系统，所有响应式类（如 col-md-4）在这里都失效——你得手动管理宽度和间距，不能指望断点自动适配。
