应按bootstrap断点精准覆盖容器宽度：cdn环境用@media复现原条件修改，sass项目须在variables后、container前重定义$container-max-widths变量并用map-merge局部更新，同时排查父容器padding、overflow及组件内嵌限制。
直接写 .container { max-width: 1400px } 会破坏响应式，小屏强制撑宽导致横向滚动，大屏又被 Bootstrap 原生媒体查询覆盖失效；必须按断点精准覆盖或重定义 Sass 变量。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认 max-width 值不同，改错数值就白忙。Bootstrap 5.3+ 的标准断点是：
-
sm: ≥ 576px → 默认540px -
md: ≥ 768px → 默认720px -
lg: ≥ 992px → 默认960px -
xl: ≥ 1200px → 默认1140px -
xxl: ≥ 1400px → 默认1320px
xs 是兜底（100%），没有媒体查询；别靠 DevTools 当前 computed 值反推断点范围——它只表示“哪条 @media 被命中”，不是区间。
@media 覆盖指定断点的 max-width（CDN / 已编译 CSS 环境）
这是最常用、最安全的方式，关键不是“全改”，而是复现原断点条件：
- 自定义 CSS 文件必须放在
bootstrap.min.css之后加载 - 媒体查询条件必须严格匹配，比如
@media (min-width: 1200px)，不能写成1199px或1201px - 只改你需要的断点，例如只想扩大桌面端宽度，就只动
xl和xxl - 不要加
!important——只要选择器是.container（不降权成div .container），且加载顺序对，就能干净覆盖
示例：把 xl 断点（≥1200px）下的宽度从默认 1140px 改为 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
重定义 $container-max-widths 变量（Sass 项目）
这是官方推荐方式，但极易静默失败——浏览器不报错，但检查 computed style 就会发现宽度根本没变：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须严格为
xs、sm、md、lg、xl、xxl，少一个或拼错，对应断点就回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点 - 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
示例（只调大 xl 和 xxl）：
$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
容易被忽略的父容器影响
即使 .container 的 max-width 正确生效，也可能因父级元素干扰而“看起来不对”：
- 外层有
padding（比如.container-fluid默认左右各15px）会让内容区视觉变窄 - 父容器设了
overflow: hidden可能截断超出部分，掩盖实际宽度问题 - 某些布局组件（如
offcanvas、modal）内部的.container可能受其自身样式限制，需单独覆盖
真机测试时，尤其注意 iPhone 横屏、2K 屏、折叠屏等边缘场景——这些地方最容易暴露断点覆盖遗漏或变量键名缺失的问题。
