bootstrap table 实现小屏仅显示三列需在初始化前动态配置 columns 的 visible 字段，而非用 css 隐藏：小屏下仅设 id、名称、状态三列为 true，其余为 false，并确保 fixednumber ≤ 可见列数且导出使用全量数据。
bootstrap-table 本身不支持“小屏下自动只显示三列”的响应式列裁剪，必须手动控制列的可见性。靠 css display: none 或 visible 硬隐藏会破坏表格结构（比如 colspan 错乱、固定列失效、导出异常），真正可行的是在初始化时动态生成列配置。
如何用 responsiveColumns + visible 控制小屏列数
Bootstrap Table 原生提供 responsiveColumns 选项，但它只负责折叠整行（card-view 模式），不是列级控制。要实现“仅显示 ID、名称、状态 三列”，得靠 columns 配置里的 visible 字段配合屏幕宽度判断：
- 在
$(document).ready()中先检测window.innerWidth或使用matchMedia - 为每列定义
visible值：true表示显示，false表示彻底不渲染该列（DOM 中不存在） - 小屏（如
max-width: 768px）下，只对关键三列设visible: true，其余全设false - 注意：此方式需在
columns数组中明确定义所有列，不能靠后端返回动态列结构再过滤 —— 否则排序、搜索、导出会错乱
为什么不能用 class="d-none d-md-table-cell" 隐藏列
Bootstrap 的响应式工具类（如 d-none d-sm-table-cell）作用于 <td> 和 <code><th> 元素，但 <code>bootstrap-table 渲染时会重写整个 DOM 结构，直接加 class 容易被覆盖或失效；更严重的是：
- 隐藏列仍参与宽度计算，导致表头与内容列错位
- 固定列插件（
bootstrap-table-fixed-columns）依赖列索引顺序，display: none会打乱索引，引发fixedNumber错位 - 导出 Excel / CSV 时，隐藏列仍会被包含（因为数据源未过滤）
- 排序点击事件可能绑定到已隐藏列上，触发无意义操作
如何让小屏列切换不影响固定列和导出逻辑
关键在于「列配置」和「数据源」保持一致。如果小屏只显示三列，那这三列必须是 columns 数组的前三位，且 fixedNumber 不超过该数量：
- 固定列数
fixedNumber: 1时，确保第一列（如id）在小屏也设为visible: true - 导出前调用
$table.bootstrapTable('getData', { useCurrentPage: false })获取全量数据，而非依赖当前视图列 - 若需不同设备导出不同列，应改用服务端导出，前端只控制展示
- 避免在
onPostBody里用 jQuery 手动删th/td—— 这会破坏 bootstrap-table 内部的列映射关系
真正稳定的方案，是把“小屏三列”当作一个独立的列配置对象，在初始化前就准备好两套 columns，再根据 matchMedia 切换。别指望 CSS 类或运行时 DOM 操作能兜住所有边界情况 —— 列可见性必须从配置源头控制。
