禁用 bootstrap 响应式需三步：先删 使媒体查询失效；再用 @media (min-width: 0) 等全断点覆盖 .container 宽度；最后将 col-md-* 等替换为无条件生效的 col-xs-* 或 col-*，并设 body { min-width: 1200px } 防挤压。
禁用 Bootstrap 响应式断点布局，本质不是“关开关”，而是切断媒体查询触发条件 + 强制覆盖断点样式。只改 .container 宽度远远不够，漏掉任一环节都会导致列塌缩、导航栏错位或轮播图居中不铺满。
必须先删掉 <meta name="viewport">
这是整个响应式链路的起点。没有它，@media (min-width: 768px) 这类规则在手机浏览器里基本不执行——不是失效，是压根不匹配。删掉后，页面退化为桌面视口宽度（约 980px）渲染，所有断点类（col-md-*、col-lg-*）失去意义。注意：col-xs-* 仍有效，因为它对应的是 @media (min-width: 0) 或无媒体查询的默认样式。
- 检查
中是否残留该标签，包括 CMS 或模板自动生成的 - 删掉后刷新移动端页面，确认地址栏不再缩放、滚动条变长（说明已退回到非响应式渲染模式）
- 不删 viewport，后面所有 CSS 覆盖都可能被浏览器强制“矫正”
.container 的 max-width 必须逐断点覆盖
Bootstrap 的 .container 在每个断点下都有独立的 max-width 声明（如 sm 是 540px，lg 是 1140px）。只写一条 .container { max-width: 1200px !important } 会被后续媒体查询里的声明覆盖，无效。
- 稳妥写法：用
@media (min-width: 0)捕获全部，再加各断点显式覆盖 - 示例（放在自定义 CSS 中，且必须在
bootstrap.min.css之后引入）：
.container {
max-width: 1200px !important;
}
@media (min-width: 0) {
.container { max-width: 1200px !important; }
}
@media (min-width: 576px) {
.container { max-width: 1200px !important; }
}
@media (min-width: 768px) {
.container { max-width: 1200px !important; }
}
@media (min-width: 992px) {
.container { max-width: 1200px !important; }
}
@media (min-width: 1200px) {
.container { max-width: 1200px !important; }
}
更简洁但等效的写法是直接用 width: 100% !important，前提是你的内容能接受完全撑满视口（此时 .container 退化为普通块级容器）。
栅格类必须切换成 col-xs-*，不能混用
col-md-4 和 col-lg-6 这些类的样式只在对应媒体查询内生效。禁用 viewport 后，这些查询不触发，它们的 CSS 规则不会加载，DOM 上虽然有 class，但实际没样式，列会垂直堆叠或宽度为 0。
- 把所有
col-md-*、col-lg-*替换为col-xs-*（v3）或col-*（v4/v5），它们是无条件生效的基线栅格 -
col-xs-12在所有分辨率下都是 100%，col-xs-6恒为 50%，无需担心断点逻辑 - 不要试图保留
col-md-*并靠 CSS 强制显示——它的 display、flex-basis 等依赖媒体查询，强行覆盖易出错
body 或外层容器需设 min-width 防止小屏挤压
仅固定 .container 宽度后，body 本身仍随窗口缩放，导致导航栏背景、轮播图等元素无法铺满，出现左右白边。这不是 bug，是 CSS 流式布局的自然表现。
- 给
body加min-width: 1200px（值需与.container一致） - 或者对关键模块（如
.navbar、.carousel）单独加width: 100vw或min-width: 1200px - 避免用
@media (max-width: ...)动态设body { width }——这又引入了响应式逻辑，且容易和 viewport 缺失状态冲突
真正麻烦的从来不是 container 宽度，而是那些隐式依赖媒体查询的组件（比如 navbar-toggler 的 JS 显隐逻辑、下拉菜单的定位计算）。它们不会因为你删了 viewport 就自动“变老实”，需要额外处理或替换为静态结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
