禁用 Bootstrap 响应式布局的关键是移除 viewport meta 标签，否则媒体查询和断点类无法生效；需手动重置 container 宽度、grid 间距，并在 Sass 中精简断点配置，同时注意字体、缩放及第三方组件的兼容性问题。
禁用 Bootstrap 响应式布局的关键是移除 viewport meta 标签
Bootstrap 的响应式行为不是靠 CSS 类或 JS 控制的，而是由页面头部的 <meta name="viewport"> 触发的。没有它，移动端浏览器会以桌面视口宽度（通常约 980px）渲染页面，col-md-*、container-fluid 等断点类就失去意义——它们依然存在，但不会随屏幕缩放重新排列。
所以第一步永远是检查并删掉这行：
<meta name="viewport" content="width=device-width, initial-scale=1">
删掉后，所有基于 min-width 的媒体查询（如 @media (min-width: 768px)）在手机上基本不生效，布局退化为固定宽度+垂直堆叠。
必须手动覆盖 container 和 grid 的最大宽度
即使禁用了 viewport，Bootstrap 的 .container 默认仍按断点设了 max-width，比如 md 断点下是 720px。你得强制它铺满：
- 给
.container加max-width: 100% !important - 或者直接不用
.container，改用.container-fluid（它本就是width: 100%，但注意它仍受 viewport 影响） - 如果用了
grid系统，.row的margin-left/right: -15px和.col的padding-left/right: 15px仍存在，需重置为 0 才能真正“无间距”
自定义编译时去掉媒体查询（仅适用于 Sass 版本）
如果你用的是 Bootstrap 源码（Sass），最彻底的方式是修改 _variables.scss：
- 把
$grid-breakpoints改成只留一个断点：(xs: 0) - 把
$container-max-widths设为空映射：() - 注释或删掉所有
@include media-breakpoint-up/down/only(...)的调用
这样编译出的 CSS 里根本不会有 @media 规则，连断点类名（如 col-lg-6）都不会生成——但要注意：你写的 col-6（即 xs 断点）仍有效，因为它是默认断点。
禁用响应式后常见意外问题
很多人以为删了 viewport 就万事大吉，结果发现按钮变小、文字糊成一片、表单错位——这是因为：
- iOS Safari 会强制缩放超宽内容，哪怕没 viewport，也可能触发“双击放大”，导致布局跳动
-
font-size: 1rem在不同设备上实际像素值不同，需配合html { font-size: 16px }锁死基准 - 第三方组件（如日期选择器、模态框）内部可能自带响应式逻辑，删 viewport 后它们的 JS 判断可能失效，出现遮罩层不全、定位偏移
真正禁用响应式不是开关操作，而是从 HTML 结构、CSS 继承链、JS 行为三层同时切断依赖；漏掉任何一层，都可能在某个机型上突然“复活”响应式表现。
