ipad上col-md-3错位主因是未严格遵循container→row→col嵌套结构，或受设备像素比、缩放等影响导致断点计算偏差；需检查.row负边距是否生效，并避免row上设置flex-wrap/height，侧边栏应配合d-none d-md-block响应式控制。
为什么iPad上col-md-3会错位
因为iPad横屏宽度约768–1024px，刚好卡在Bootstrap的md断点（≥768px）边缘，但实际渲染受设备像素比、缩放状态、浏览器工具栏高度影响，常导致col-md-3列宽计算偏差或换行异常。更常见的是父容器没套row，或row外层缺container，让负边距失效，列直接顶到视口边缘。
-
col-md-3本身没问题，但必须严格嵌套在container→row→col-md-3三层结构里 - 检查iPad Safari开发者工具中
.row的computedmargin-left和margin-right是否为-0.5rem；若为0，说明container缺失 - 避免在
row上写flex-wrap: wrap或height，这会破坏align-items拉伸逻辑 - 如果用了
g-3等间距类，而内容又带长文本，小屏下可能撑破列宽——改用g-2或g-1
侧边栏在iPad横屏堆叠或遮挡主内容
这不是栅格错了，是没处理好“存在方式”：只靠col-md-3 + col-md-9在iPad横屏下仍强制并排，但侧边栏内容稍多就会挤压主内容，甚至触发横向滚动条。
- 桌面端（≥768px）保留
col-md-3+col-md-9，但给侧边栏加d-none d-md-block，确保它在小屏完全不渲染 - 移动端（offcanvas包裹侧边栏，通过按钮触发展开，而不是靠
d-sm-none视觉隐藏 - 主内容区必须加
min-height: 100vh，否则offcanvas展开后页面塌陷，底部留白 - 别给
offcanvas加position: relative或自定义width，用style="--bs-offcanvas-width: 280px;"控制宽度
卡片标题在iPad横屏居中失败
常见错误是把text-center text-md-start加在card-title标签上，但card-title只是语义类，不控制对齐；真正起作用的是它的父容器，比如card-header或外层div。
- 正确写法：
<div class="card-header text-center text-md-start">标题</div> - 如果没用
card-header，就包一层<div class="text-center text-md-start"></div> - 检查该容器是否被设了
d-flex或justify-content-*——flex布局下text-*类会失效 - 别用
text-lg-start替代text-md-start，iPad横屏宽度达不到992px，lg断点不会触发
表格在iPad上横向溢出或分页错位
Bootstrap Table默认不开启移动端适配，pagination容器在窄屏下仍按flex单行渲染，页码挤成一团或截断，table本身也容易因列数过多撑破视口。
- 初始化时必须设
mobileResponsive: true和minWidth: 768，匹配iPad断点 - 隐藏非关键列：
columnsHidden: ['operation', 'detail']，避免列宽溢出 - 分页容器要加
justify-content-sm-center，不是justify-content-center——后者在375px手机屏也生效，反而导致按钮堆叠 - 如果分页是JS动态插入（如bootstrap-table），HTML里写的
justify-content-sm-center无效，得用JS注入：$('ul.pagination').addClass('justify-content-sm-center')
container/row）、交互逻辑缺失（该用offcanvas却只靠d-none）、或对齐类挂错位置（加在card-title而非其父容器）三者叠加。调试时优先打开Safari开发者工具，看computed样式里display、margin、flex-direction是否符合预期。
