调整Bootstrap容器尺寸后页面无响应、内容溢出、导航重叠如何解决

问题根源 #

你写的CSS规则存在逻辑错误，直接破坏了Bootstrap容器的响应式特性：

• 全局给.container.max-width-940设置了min-width: 1390px !important，无论屏幕宽度多小，容器都会强制撑到1390px宽，屏幕宽度小于1390px时自然会出现内容横向溢出、和固定导航栏重叠的问题
• 两个响应式断点的max-width设置完全一致，属于冗余规则
• 滥用!important会覆盖Bootstrap原生的响应式布局逻辑，同时行内的width:100%和你自定义的固定宽度规则存在冲突

修复方案 #

1. 替换自定义CSS规则 #

删掉全局固定最小宽度的规则，只在大于指定断点的场景下修改容器最大宽度即可：

/* 仅在屏幕宽度≥992px时放大容器尺寸 */
@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 1390px;
  }
}

如果确实需要在宽屏下保证最小宽度，可以把最小宽度的规则写在媒体查询内部，不要全局生效：

@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 1390px;
    min-width: 1100px; /* 根据实际需求调整，不要超过当前断点宽度 */
  }
}

2. 清理HTML冗余属性 #

删掉没必要的行内样式，Bootstrap的container类已经自带水平居中、宽度适配的特性，多余的属性反而会打乱布局：

<div style="background-color:white;border-radius:10px;" class="container max-width-940 body-content">
  <!-- 页面内容 -->
</div>

注意：div不是自闭合标签，不要写/>结束，要单独写闭合标签</div>包裹内部内容，否则也可能出现布局解析错误。

额外优化建议 #

• 非必要不使用!important，自定义CSS只要放在Bootstrap CSS之后引入，相同选择器的优先级就会高于原生规则，不需要强制提升优先级
• 如果你使用的是Bootstrap的SASS版本，直接修改$container-max-widths变量修改各断点的容器宽度，兼容性和可维护性更好

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