bootstrap移动端布局错乱并非框架故障，而是viewport缺失、navbar-expand-*漏写、mobileresponsive未开启、text-size-adjust未设等隐性依赖被触发；需检查meta标签、断点匹配、css覆盖及真机渲染差异。
Bootstrap CSS 在移动端布局错乱，不是框架“坏了”，而是它默认的栅格、组件和响应式逻辑，在真实移动设备上被 viewport 设置、缩放行为、flex 渲染差异、第三方覆盖样式等叠加干扰后，暴露出了隐性依赖——比如 navbar-expand-* 漏写、mobileResponsive 未开启、text-size-adjust 缺失，这些看似细节点，恰恰是错位的开关。
viewport meta 写错或缺失，直接废掉所有响应式逻辑
没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，或者混进了 maximum-scale=1、user-scalable=no，会导致 iOS Safari 忽略 dvh、visualViewport，连 @media (max-width: 768px) 都可能不触发。
- 真机上
window.innerWidth显示 980px？基本就是 viewport 缺失或写成width=375这类固定值 -
initial-scale=1.0必须显式写，否则横屏切换时 Safari 可能重置缩放，触发二次 layout shift - 删掉所有
minimum-scale/maximum-scale—— iOS 16+ 已无视它们，还可能降级到兼容模式
navbar-expand-* 类漏写或断点不匹配，汉堡菜单根本不渲染
navbar-expand-lg 不是“可选装饰”，它是折叠菜单的硬开关。漏写，.navbar-toggler 元素压根不会出现在 DOM 中；写错（比如写成 navbar-expand），构建工具可能过滤掉，或断点值与实际视口不匹配。
- 用 DevTools 查看小屏下
.navbar-collapse的display值：如果是block而非none，说明媒体查询没生效 - 自定义了 Sass 断点变量（如
$grid-breakpoints）但没重编译 CSS？HTML 里写的md仍按原始 768px 判断 - 检查是否全局重置了
.collapse { display: block !important }，这会直接禁用折叠逻辑
table 或 list-group 在移动端自动换行却高度错位
Bootstrap 的 .table 和 .list-group 默认不处理移动端内容挤压。列溢出、文字截断、项宽不均，本质是没干预 flex/gird 的默认收缩行为或没重置子项 margin/width。
<table> 出现横向滚动条？优先开 <code>mobileResponsive: true，并设columnsHidden隐藏非关键列，别只靠white-space: nowrap-
.list-group-item横排错位？必须清掉默认margin和width: 100%，再用display: grid+minmax(200px, 1fr)控制列数，而不是justify-content: space-between - 两列在移动端折成单列后高度被均分？给
.row加@media (max-width: 768px) { display: block !important; }，退出 flex 流，让高度回归内容决定 - 全局加
html { text-size-adjust: 100%; }，这是唯一有效写法；写在p或div上无效 - 所有元素必须
box-sizing: border-box（含::before/::after），否则缩放下亚像素误差导致换行 - flex 子项（如图标按钮）要显式设
flex-shrink: 0+min-width: 44px，防被压缩变形
缩放时布局抖动、文字跳动、按钮变小
这不是“适配没做好”，而是浏览器缩放改变了文本渲染尺寸，进而扰动父容器高度、flex 基准、line-height 计算——而 Bootstrap 默认没隔离这种影响。
最容易被忽略的是：真机上 flex-basis 在 iOS Safari 和 Android WebView 解析不一致，有的转 auto，有的保留像素值；visualViewport.height 在键盘收起瞬间有几十毫秒延迟；第三方 UI 库内部用了 transform 或脱离文档流，会让 display: flow-root 失效——这些没法靠改一两个 class 解决，得在真机上逐项验证 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
