bootstrap 5 的 .container 宽度由断点下的 max-width 动态控制，非固定值；默认 xs(100%)、sm(540px)、md(720px)、lg(960px)、xl(1140px)、xxl(1320px)，width 始终为 100%，仅 max-width 起约束作用。
Container 的宽度限制由断点和 max-width 决定，不是固定值
Bootstrap 5 的 .container 没有单一“宽度限制”，它在不同视口下通过 max-width 动态切换上限，width: 100% 始终生效，真正起约束作用的是媒体查询里的 max-width。强行写 width: 1200px 会失效，因为会被后续更具体的 @media 规则覆盖。
默认断点与对应 max-width（Bootstrap 5.3+ 官方值）：
- xs（
）：100% - sm（
≥ 576px）：540px - md（
≥ 768px）：720px - lg（
≥ 992px）：960px - xl（
≥ 1200px）：1140px - xxl（
≥ 1400px）：1320px
这些值来自 Sass 变量 $container-max-widths，可自定义；若你用的是 CDN 引入的 CSS，就只能覆盖媒体查询或重写 max-width。
为什么改 .container 的 width 不生效
因为 Bootstrap 4+ 彻底弃用 width 控制容器尺寸，全部移交 max-width 管理。你看到的“1140px”是 @media (min-width: 1200px) 下的 max-width，不是内联或直接样式里的 width。
常见错误现象：
- 写
.container { width: 1400px; }→ 小屏下溢出，大屏下仍被max-width: 1140px截断 - 只覆盖基础选择器
.container→ 被更具体的选择器（如@media (min-width: 1200px) .container）优先级压制 - 没清空旧缓存或未用
!important（临时调试可用，但不推荐上线）
正确做法是复写对应断点的 max-width，例如：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
.container 和 .container-fluid 的实际使用差异
.container 是响应式固定宽容器：居中、带左右 padding: 15px、随断点切换 max-width；.container-fluid 是流式全宽容器：无 max-width、width: 100%、同样含 padding: 0 15px，但 margin 为 0。
典型使用场景：
- 正文区域、表单页、卡片列表 → 用
.container，避免小屏文字过窄、大屏内容过散 - Banner、导航栏、页脚背景色块 → 用
.container-fluid，再套.container放内容，实现“全宽背景 + 居中内容” - 需要精确控制某区块宽度（如固定 1200px 宽度的仪表盘）→ 不要用
.container，改用自定义类或.container-fluid+ 内层div设max-width
注意： 时两者视觉表现一致（都是 100% 宽 + 15px 左右 padding），但 DOM 结构和语义不同，影响可访问性与维护性。
修改 Container 宽度时最容易忽略的兼容性点
断点值不是硬编码在 CSS 里，而是从 Sass 变量编译而来。如果你用的是预编译版本（如自己构建 Bootstrap），应优先改 _variables.scss 中的 $container-max-widths，而不是手写媒体查询——否则升级 Bootstrap 版本后容易被覆盖。
另一个常被跳过的点是栅格系统依赖容器宽度做百分比计算。比如 .col-6 在 .container（1140px）下占 570px，若你把 max-width 改成 1280px，列宽会自动按比例变宽，但某些自定义组件可能写了死像素值（如 width: 570px），导致错位。
最后提醒：.container 必须配合 .row 使用，.row 的 margin: 0 -15px 是为了抵消 .container 的 padding。单独给 .container 加 px-0 而不调整 .row，会导致栅格塌陷。
