Bootstrap cover模板调宽无效 修改@media样式无反应怎么办

改@media参数没反应核心是漏改了非媒体查询块内的容器宽度限制，或者样式优先级不对、缓存没刷新，按下面步骤操作即可：

• 不要直接修改Bootstrap源CSS文件，单独新建自定义CSS文件，确保自定义CSS的引入标签放在bootstrap.css引入标签的后面，保证自定义样式优先级更高
• 模板默认的.cover-container容器在媒体查询块外就写死了基础max-width（默认值是42em，约672px），只改媒体查询内的参数不会覆盖这个基础值，必须同步修改
• 把下面的代码加到你的自定义CSS中，把960px替换成你需要的宽度数值即可：

.cover-container {
  max-width: 960px;
}

@media (min-width: 768px) {
  .cover-container {
    max-width: 960px;
  }
}

• 修改完成后强制刷新浏览器清除缓存：Windows端按Ctrl+F5，Mac端按Cmd+Shift+R，避免浏览器加载旧版本的CSS文件

如果你是用CDN方式引入的Bootstrap，不要尝试修改CDN资源内的代码，CDN资源刷新后就会恢复默认，用自定义样式覆盖是唯一长期生效的方案。

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