Bootstrap怎么让Card卡片在移动端显示为横向滑动列表-Bootstrap教程-PHP中文网

移动端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;">
    @@##@@
    <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 的默认优化策略。

VPS Bootstrap

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

下载

必须写在启用横向滚动的容器上（即上面的 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）在这里都失效——你得手动管理宽度和间距，不能指望断点自动适配。