求助：如何在最新版Bootstrap中禁用手机/平板视图？旧方案无效

嘿，我懂你为啥头疼——最新版Bootstrap（尤其是Bootstrap 5及以后）彻底重构了响应式架构，那些针对旧版本的技巧比如container-fixed或者简单修改viewport早就不管用了。下面给你两个靠谱的解决方案，根据你的使用场景选就行：

如果你是用Bootstrap的Sass源码编译项目，这是最干净、最可持续的方式：

• 在导入Bootstrap核心Sass文件之前，覆盖几个关键变量，直接从源头关掉响应式：

  // 禁用响应式字体缩放
  $enable-responsive-font-sizes: false;
  // 禁用自动生成的响应式栅格列类
  $enable-grid-classes: false;
  // 把所有断点的容器最大宽度都设为桌面端的默认值（比如1140px）
  $container-max-widths: (
    sm: 1140px,
    md: 1140px,
    lg: 1140px,
    xl: 1140px,
    xxl: 1140px
  );
  
  // 导入Bootstrap核心样式
  @import "../node_modules/bootstrap/scss/bootstrap";
  

• 编译后的CSS会完全去掉响应式媒体查询，所有布局、排版都会固定在桌面端样式，不管屏幕尺寸怎么变都不会切换。

如果你直接用CDN或者预编译的bootstrap.css，那就得用自定义CSS强制覆盖响应式行为：

1. 先修改viewport元标签，固定页面宽度并禁止移动端缩放：

   <meta name="viewport" content="width=1140px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   

2. 然后添加以下自定义CSS，强制布局保持桌面端状态：

   /* 强制容器固定宽度，不管屏幕大小 */
   .container, .container-fluid {
     max-width: 1140px !important;
     width: 1140px !important;
     margin-left: auto !important;
     margin-right: auto !important;
   }
   
   /* 禁用栅格列的响应式伸缩行为 */
   .row > * {
     width: auto !important;
     flex: none !important;
   }
   
   /* 强制所有文本、按钮保持桌面端字体大小 */
   h1, h2, h3, h4, h5, h6, p, .btn, .form-control {
     font-size: inherit !important;
   }
   

3. 额外处理组件：如果用了导航栏这类自带响应式切换的组件，还要加一句：

   /* 强制导航栏保持桌面端水平布局，隐藏移动端汉堡按钮 */
   .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-toggler {
     display: none !important;
   }
   

• 这种方法虽然有点“硬刚”，但能快速解决问题，需要注意的是如果用了其他Bootstrap组件，可能要针对性地补充覆盖样式。

如果还有某个组件的响应式行为没搞定，可以具体说出来，我再帮你调整~

内容的提问来源于stack exchange，提问作者Argon