bootstrap的.container非固定宽度，其max-width由媒体查询控制；直接内联style无效因被查询覆盖；纯css需在bootstrap后加载并精准匹配xxl断点；sass重定义需完整赋值所有断点变量；真需全宽应改用.container-fluid。
因为 Bootstrap 的 .container 本质是一组带 max-width 的媒体查询规则，不是“固定宽度”容器；它卡在 1140px 或 1320px 是设计使然，不是 bug，更不是 CSS 写错了。
为什么直接写 style="max-width: 1400px" 没用
内联样式优先级高，但会被 Bootstrap 自带的媒体查询规则覆盖——尤其当你的内联样式没带 @media 时，它只在所有尺寸下生效，小屏也会被强制拉宽。
- Chrome DevTools 的 Computed 面板里能看到这条样式被划掉（crossed out）
- 加
!important能临时压住，但会让 xs/sm 断点也变成 1400px，响应式逻辑彻底失效 - 移动端可能出现横向滚动、文字错位、按钮被截断等现象
怎么用纯 CSS 安全覆盖 xxl 断点的 max-width
适用于 CDN 引入、没走 Sass 编译的项目。关键是加载顺序和断点值必须对齐 Bootstrap 版本。
- 自定义 CSS 文件必须在
bootstrap.min.css之后加载 - 断点阈值要严格匹配：Bootstrap 5.3 的
xxl是@media (min-width: 1400px)，不能写成1399px或1401px - 别加
!important——只要选择器没降权（比如别写成div.container），就能覆盖
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
怎么用 Sass 重定义 $container-max-widths 变量
这是最干净的方式，但只适用于你自己编译 Bootstrap 的场景（如 Webpack + sass-loader）。变量覆盖失败不会报错，页面看起来“正常”，但实际宽度没变——容易被忽略。
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须完整：
xs、sm、md、lg、xl、xxl一个都不能少，缺一个会导致对应断点回退默认值 - 如果新增了断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1440px );
什么时候该放弃 .container，改用 .container-fluid
如果你的真实需求是“某区块必须撑满视口”，比如数据看板、后台主区域、全宽 banner，硬调 .container 的 max-width 是吃力不讨好。
-
.container-fluid天生无max-width，宽度恒为100%，天然适配任意分辨率 - 它默认带
padding-left/right: 15px，要用px-0清除，或用px-5放大留白 - 注意：
.container-fluid内部仍需套.row，否则.col会因缺少负 margin 抵消而错位
真正容易被忽略的是：Sass 变量覆盖失败时没有警告，你得手动检查渲染后的 computed max-width 值；还有混用 Bootstrap 4 的旧变量名（比如 $grid-breakpoints 拼错）会导致静默降级——这些地方一漏，改半天也看不出效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
