直接写 .container { width: 1200px } 不起作用，因为 Bootstrap 4+ 改用 max-width + 媒体查询实现响应式，width 会被后续更具体的 max-width 规则覆盖，且小屏下会撑破视口。
为什么直接写 .container { width: 1200px } 不起作用
因为 bootstrap 4+（含 5）完全弃用 width 控制容器尺寸，全部依赖 max-width + 媒体查询实现响应式。你写的 width: 1200px 会被后续更具体的 @media 规则中定义的 max-width 覆盖，且在小屏下还会撑破视口。
锁定 1200px 的正确写法：覆盖所有断点的 max-width
必须让每个断点下的 .container 都强制使用同一 max-width，否则小屏仍会收缩。推荐在自定义 CSS 文件末尾（确保加载在 Bootstrap 之后）添加：
@media (min-width: 0) {
.container {
max-width: 1200px;
}
}
@media (min-width: 576px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 768px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 992px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1200px;
}
}
- 不加
!important—— 只要 CSS 加载顺序正确、选择器没降权（比如别写成div.container），就能生效 - Bootstrap 5 的
xxl断点（≥1400px）也得显式覆盖，否则它默认是1320px或更高 - 如果只覆盖部分断点（比如只改
xl），小屏下宽度仍会变窄，达不到“锁定”效果
用 Sass 重编译是最干净的方案（仅限源码项目）
如果你用的是 Bootstrap Sass 源码（非 CDN），直接修改变量比写一堆媒体查询更可靠：
$container-max-widths: ( xs: 1200px, sm: 1200px, md: 1200px, lg: 1200px, xl: 1200px, xxl: 1200px );
- 所有断点统一设为
1200px，编译后自动注入对应媒体查询 - 避免手动维护 CSS 冗余规则，也不用担心加载顺序问题
- 注意：
xs对应max-width: 100%的原始行为被覆盖后，超小屏也会固定为 1200px —— 这可能造成横向滚动，需确认设计是否接受
容易忽略的副作用：内边距和栅格视觉对齐
.container 默认左右 padding: 15px，锁定宽度后，内容区实际可用宽度是 1200px - 30px = 1170px。这本身没问题，但要注意：
-
.navbar、.card-deck等组件内部居中逻辑依赖.container的max-width，改完后它们仍能居中，但留白比例变了 -
.row的负 margin（-15px）不变，所以栅格列布局不会崩，但内容“呼吸感”变弱，尤其在大屏上显得拥挤 - 如果设计稿要求“内容区 1200px + 两侧留白自适应”，其实更适合用
.container-fluid包一层，再套个max-width: 1200px; margin: 0 auto;的子容器
