用Bootstrap 5响应式栅格+卡片可直接实现手机端优惠券卡包页，需禁用container-fluid默认左右padding（px-0）防窄屏横向滚动；卡片用border-0、shadow-sm、p-3；状态标签自定义色并absolute定位；未用券用collapse折叠；保留viewport缩放能力。

直接用 Bootstrap 5 的响应式栅格 + 卡片组件就能做出可用的手机端优惠券卡包页，不需要额外框架或重写 CSS —— 但必须禁用 container-fluid 的默认左右 padding，否则在 iPhone 等窄屏上会触发横向滚动条。

为什么不能直接用 container 或 container-fluid

Bootstrap 默认给 container 和 container-fluid 设了 padding-left: 15px 和 padding-right: 15px，在 viewport 宽度 ≤ 375px（如 iPhone SE/8）时，这个 padding 会让内容实际宽度超 100vw，触发横向滚动，用户一滑就看到白边，体验极差。

• 解决方案：用 container-fluid px-0 覆盖默认 padding
• 别用 container —— 它在小屏下会缩窄，导致卡片留白过大
• 如果用了自定义主题或 Sass 编译，可全局重设 $container-padding-x: 0

card 必须加 border-0 和 shadow-sm

原生 card 在移动端显得厚重、边框太实，视觉上像“贴在屏幕上的塑料片”。真实优惠券需要轻盈感和轻微层次。

• 去掉默认边框：border-0
• 用 shadow-sm（不是 shadow）提供柔和投影，避免在 OLED 屏上过曝
• 卡片内距统一用 p-3（不是 p-4），小屏空间紧张，多 1rem 就挤不下关键信息
• 示例结构：

  优惠券状态标签要用 badge + 自定义背景色

  Bootstrap 内置的 bg-success/bg-warning 在深色背景或浅灰底图上对比度不足，iOS 系统级色彩管理还会让颜色发灰。

  

  VPS Bootstrap

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

  下载

  • 推荐手写三类状态色（加到 或 CSS 文件中）：
    .bg-coupon-active { background-color: #FF6B35; }
.bg-coupon-used { background-color: #9E9E9E; }
.bg-coupon-expired { background-color: #E53935; }
  • 标签位置固定在卡片右上角：可用
  • 务必加 position-absolute，否则会影响卡片内文字流式布局

  折叠未使用的优惠券用 collapse 而非 fade

  用户进页面第一眼只关心“我能用哪张”，把已过期、已使用、不可用的券默认收起，比全量渲染更省性能，也减少视觉干扰。

  • 用 collapse（不是 fade）—— 因为它不占 DOM 高度，动画结束即 display: none，不会影响列表项间距计算
  • 触发按钮加 data-bs-toggle="collapse" 和对应 data-bs-target
  • 注意：collapse 默认无过渡动画，需手动加 CSS：.collapse { transition: height 0.3s ease; }
  • 别用 max-height 模拟折叠 —— 在 iOS Safari 上容易卡顿或高度计算错误

  最易被忽略的是 viewport meta 标签里的 user-scalable=no —— 很多团队为防误触加了它，结果用户双指缩放看不清券码，客服投诉翻倍。留着缩放能力，只靠 touch-action: manipulation 优化点击响应就够了。