bootstrap后台页面小屏仍双列是因未显式声明最小断点，如侧边栏需写col-12 col-sm-3而非仅col-md-2，否则xs下回退至默认行为导致撑满重叠。
直接用 Bootstrap 的 container、row 和 col-* 类就能让后台页面在手机、平板、桌面端自动适配，但光套类名远远不够——多数人卡在断点错配、嵌套失控和组件响应失效上。
为什么后台页面在小屏上仍显示侧边栏+主内容双列？
这是最常被忽略的断点逻辑问题。Bootstrap 的栅格类如 col-md-3 表示“仅在中等及以上屏幕生效”，而默认未指定的 col（无断点前缀）会在所有尺寸下等宽平分。后台菜单栏常写成 col-md-2 col-lg-2，但没写 col-12 或 col-sm-12，导致小屏下仍按 md 规则渲染，撑满又重叠。
实操建议：
- 所有侧边栏、主内容区必须显式声明最小断点：比如
col-12 col-sm-3 col-lg-2（小屏占满，中屏收窄） - 避免只用
col-md-*，除非你确认用户绝不用手机访问后台 - 用浏览器 DevTools 的「Toggle device toolbar」反复测试
xs（sm（≥576px）两个临界点
表格在移动端横向溢出，table-responsive 不起作用？
table-responsive 只对直接包裹 <table> 的 <code><div> 有效，且要求该 <code><div> 是块级元素、无 <code>overflow: hidden 覆盖。后台常见错误是把表格包在 col 内又加了 overflow: auto，或用了 Flex 容器（如 d-flex）导致父容器不触发滚动上下文。
实操建议：
- 严格按文档结构：
<div class="table-responsive"><table class="table">...</table></div> - 检查祖先元素是否设置了
overflow: hidden（尤其是.wrapper或.content这类自定义容器） - 若需固定表头，别依赖
table-responsive，改用sticky-top+position: sticky配合max-height控制区域
模态框（modal）在 iOS 上点击空白处无法关闭？
这是 Bootstrap 5 移除 jQuery 后暴露的老问题：iOS Safari 对 touchend 事件冒泡处理异常，导致 data-bs-dismiss="modal" 绑定的 backdrop 点击失效。尤其在后台系统里，用户频繁打开编辑弹窗，这个 Bug 会直接阻断操作流。
实操建议：
- 确保引入的是完整版
bootstrap.bundle.min.js（含 Popper），而非仅 CSS + 单独 JS - 手动补监听：在 modal shown 后，给
.modal-backdrop加touchstart事件并调用hide() - 更稳妥方案：改用
data-bs-keyboard="false"+ 显式关闭按钮，并禁用 backdrop 点击关闭（后台操作本就不该依赖误触）
真正难的不是写对类名，而是理解每个断点背后的真实设备分布、触摸交互限制和 DOM 渲染边界——比如 iPad mini 的宽度刚好卡在 sm 和 md 之间，一个没测到的 col-sm-6 就会让仪表盘卡片错行。后台系统没人会滑动看全表，所以优先保证关键操作区域可点、可读、不重叠，比追求“完美响应”更重要。
