如何将使用Ample Blog主题的WordPress网站设置为非响应式？

• 固定全局容器宽度，覆盖Bootstrap响应式容器默认规则。在WordPress后台「外观-自定义-额外CSS」字段添加如下代码：

.container, .container-fluid {
  width: 1024px !important;
  max-width: 1024px !important;
  min-width: 1024px !important;
  margin: 0 auto !important;
}

无需修改Bootstrap源文件，额外CSS的优先级高于主题和框架自带样式，不会导致桌面端布局堆叠。

• 强制覆盖所有响应式断点规则，在额外CSS末尾添加如下代码，强制所有尺寸下沿用桌面端栅格布局：

@media (max-width: 1023px) {
  /* 固定栅格宽度为桌面端规则 */
  .col-md-1 { width: 8.33333333% !important; }
  .col-md-2 { width: 16.66666667% !important; }
  .col-md-3 { width: 25% !important; }
  .col-md-4 { width: 33.33333333% !important; }
  .col-md-5 { width: 41.66666667% !important; }
  .col-md-6 { width: 50% !important; }
  .col-md-7 { width: 58.33333333% !important; }
  .col-md-8 { width: 66.66666667% !important; }
  .col-md-9 { width: 75% !important; }
  .col-md-10 { width: 83.33333333% !important; }
  .col-md-11 { width: 91.66666667% !important; }
  .col-md-12 { width: 100% !important; }
  /* 隐藏移动端专属元素 */
  .mobile-menu, .navbar-toggle {
    display: none !important;
  }
  /* 强制展示桌面端导航 */
  .desktop-menu, .navbar-collapse {
    display: block !important;
    height: auto !important;
  }
}

• 补全viewport标签配置，避免移动端自动缩放，完整配置如下：
  <meta name="viewport" content="width=1024, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  可直接编辑主题header.php文件替换原有viewport标签，也可通过WordPress的wp_head钩子插入，避免主题更新后配置丢失。
• 排查主题自带响应式样式，若仍存在适配问题，可在浏览器开发者工具中定位到对应响应式规则，复制选择器后在额外CSS中添加固定宽度/显示规则覆盖即可。

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