直接写 .container { max-width: 1400px } 不生效，因为 bootstrap 4 的 .container 宽度由媒体查询控制，全局规则会被更高权重的断点规则覆盖，且在小屏下导致横向滚动条；应通过在 bootstrap.css 后引入匹配断点的自定义媒体查询（如 @media (min-width: 1200px) { .container { max-width: 1280px; } }）或使用 .container-fluid 套 .container 实现局部扩展。
为什么直接写 .container { max-width: 1400px } 不生效
Bootstrap 4 的 .container 宽度完全由媒体查询控制，比如 @media (min-width: 1200px) { .container { max-width: 1140px; } }。你写的无断点全局规则，在大屏下会被这条更具体、权重更高的规则覆盖；而在小屏（如手机）下它却意外生效，把原本应为 576px 的宽度强行拉到 1400px，导致横向滚动条出现。
用自定义媒体查询精准覆盖指定断点
这是 CDN 或纯 CSS 环境下最可靠的方式，关键在三点：加载顺序、断点值匹配、选择器简洁。
- 你的 CSS 文件必须在
bootstrap.min.css之后引入 - Bootstrap 4 只有
xs/sm/md/lg/xl五个断点，其中xl对应min-width: 1200px—— 不要写成1199px或1201px - 只覆盖你需要的断点，例如扩展桌面端宽度：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
如果还想适配更大屏（如 2K），再加一条：
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
}
别加 !important —— 只要没写成 div.container 这种降权选择器，且顺序对，就能干净覆盖。
用 .container-fluid 套内层 .container 实现局部突破
当你只需要某一块区域（比如首页 Banner、全宽图表）突破默认宽度，而正文仍保持可读性时，硬改全局 .container 是过度设计。
-
.container-fluid默认撑满视口宽度，适合做视觉层背景或容器包裹 - 内层嵌套一个
.container或带自定义max-width的div，内容依然走标准断点逻辑 - 示例结构：
<div class="container-fluid bg-dark">
<div class="container py-5">
<h1>这个区域最大宽度仍是 1140px</h1>
</div>
</div>
这种组合不依赖额外 CSS，兼容所有 Bootstrap 4 版本，也不会影响栅格系统或导航栏居中逻辑。
别踩这些坑
常见静默失效或副作用场景：
- 误用 Bootstrap 5 的工具类：Bootstrap 4 没有
mw-1200这类工具类，写了也无效 - 给
.container-fluid直接加max-width却忘了加margin: 0 auto，结果内容左对齐、右侧留白 - 在 DevTools 里看到某条 CSS 规则“被划掉”，就以为没生效 —— 实际要看 computed style 中的
max-width值是否已变 - 改完后只在桌面浏览器调试，没用真机横屏或 Chrome 的 device mode 测试
xs/sm断点，结果上线才发现手机页面横向溢出
真正容易被忽略的是：改完断点后，.navbar 的居中范围、.row 的负边距行为虽不会崩，但留白比例和呼吸感会变 —— 设计稿确认好再上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
