真正可靠的做法是引入官方 bootstrap-table-mobile.js 扩展，它重写视图逻辑、正确处理表头映射与 ARIA 属性，需在 bootstrap-table.min.js 后加载，且表格须含 data-toggle="table" 与完整 thead。
直接用 data-mobile-responsive="true" 启用 Bootstrap Table Mobile 扩展
原生 Bootstrap 5 的 .table 类不支持自动卡片切换，硬写 CSS 堆叠 td 容易破坏语义和可访问性。真正可靠的做法是引入官方维护的 bootstrap-table-mobile.js 扩展——它不是“CSS 技巧”，而是重写了视图切换逻辑，能正确处理表头映射、焦点管理、ARIA 属性更新。
关键点：
- 必须在
bootstrap-table.min.js之后加载扩展脚本，顺序错会导致data-mobile-responsive被忽略 -
data-min-width="562"是默认阈值，若你目标设备（如 iPhone SE）宽度常低于 500px，建议显式设为data-min-width="480" - 表格必须有
data-toggle="table"，否则扩展不会初始化 - 别删掉
thead—— 扩展靠它生成每张卡片的标题行，缺失会导致字段名全变成 “undefined”
不用 JS 扩展时，data-label + 媒体查询是最轻量的纯 CSS 方案
如果你的表格是静态内容、不需要排序/分页/搜索，且不想引入额外 JS，可以用 HTML 属性 + CSS 堆叠。核心是给每个 td 加 data-label，再用媒体查询把 tr 设为 display: block，让单元格垂直堆叠并显示标签。
常见踩坑：
-
data-label值必须和th文字完全一致（包括空格），否则卡片里会显示错误字段名 - 移动端必须加
table { width: 100%; }，否则td宽度可能塌缩成文字宽度，导致换行错乱 - 别对
th用display: none，应改用visually-hidden工具类，否则屏幕阅读器会丢失表头信息 - Chrome DevTools 的“设备模拟”有时不触发
@media，建议真机测试或手动改window.innerWidth验证
bootstrap-table-mobile 和自定义 CSS 方案的性能与兼容性差异
两者不是“选哪个更好”，而是适用场景不同：
- 用扩展：适合动态数据、需交互（如点击某列排序、勾选多行导出）、后端返回 JSON 的场景；但首次渲染略慢，JS 包体积增加 ~8KB（gzip 后）
- 用 CSS：
td[data-label]方案无 JS 依赖，首屏快，适合 CMS 输出的静态表格、邮件模板嵌入、或 SSR 页面；但无法响应数据变更，也不支持分页状态同步 - IE11 不支持
flex-direction: column在tr上，所以纯 CSS 方案在 IE 中会彻底失效，而扩展至少能 fallback 到横向滚动 - 如果项目已用 Bootstrap 5.3+，注意扩展的最新版要求
bootstrap-table@1.22.0+，旧版本调用init()会报Cannot read property 'extend' of undefined
卡片样式细节必须手动补，扩展只管结构不管外观
bootstrap-table-mobile 只负责把表格转成卡片 DOM 结构（比如把一行变成一个 div.card，每列变成 div.card-body > p），但卡片的圆角、阴影、内边距、字体粗细全得你自己加。
实操建议：
- 在
.card上加mb-3 rounded-3 shadow-sm p-3，别用shadow（太重）或rounded（太钝） - 字段名用
small text-muted fw-semibold，值用fw-medium，避免视觉平权 - 如果某列含按钮（如“复制验证码”），确保它在卡片里仍能获得足够点击热区——加
mt-2 d-grid让按钮独占一行，别让它和文字挤在同一行 - 别在卡片内部用
col栅格——卡片已是独立容器，再套栅格会破坏流式布局，尤其在小屏上引发意外换行
移动端卡片化最易被忽略的点是**表头语义的延续性**。无论用扩展还是 CSS，data-label 或 thead 必须真实存在且准确，否则不仅视觉错乱，还会让使用读屏软件的用户完全无法理解数据含义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
