直接写 .container { max-width: 1280px } 会出问题，因为缺少媒体查询，导致小屏下强制应用该宽度而横向溢出；bootstrap 的容器宽度需通过匹配断点的 @media 规则或重定义 $container-max-widths 变量实现响应式控制。
不能只加 max-width，必须匹配断点媒体查询条件，否则小屏会横向溢出。
为什么直接写 .container { max-width: 1280px } 会出问题
这条规则没有媒体查询，浏览器会把它应用到所有屏幕尺寸。手机竖屏（如 390px 宽）下也强制 1280px，内容被挤出视口，页面可左右拖动。Bootstrap 的 .container 实际由一组 @media (min-width: ...) 规则驱动，比如：
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
你写的无断点规则既无法替代原有响应逻辑，又会在小屏下失控。
- 常见错误现象：iPhone 上能左右滑动、Chrome 模拟器看着正常但真机错位、平板横屏突然变窄
- 别用
style="max-width: 1280px"或!important覆盖——这是最易踩的坑 -
.container-fluid是真全宽（width: 100%），不是“加大一点”的替代方案
CDN 项目：用媒体查询覆盖对应断点
适用于引入 bootstrap.min.css 的项目，关键在“复现断点条件”和“加载顺序”。
- 自定义 CSS 必须放在 Bootstrap CSS 之后加载
- 断点数值必须严格对齐你用的 Bootstrap 版本（如 v5.3 是
xl: 1200px、xxl: 1400px） - 只改你需要的断点，例如把大屏宽度从 1140px 扩到 1280px：
@media (min-width: 1200px) {
.container { max-width: 1280px; }
}
@media (min-width: 1400px) {
.container { max-width: 1440px; }
}
不加 !important——只要顺序对、断点准，就能干净覆盖。
Sass 项目：重定义 $container-max-widths 变量
这是官方推荐路径，但有严格顺序要求：必须在引入 bootstrap/scss/container 之前重定义变量，且 key 名一个都不能错。
- 导入顺序必须是：
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→ 你的变量重定义 →@import "bootstrap/scss/container" - 新值要保留全部 key：
xs、sm、md、lg、xl、xxl，哪怕只改一个，其他也得照抄原值 - 如果同时调整了
$grid-breakpoints（比如新增了xxxl），那$container-max-widths里也必须补上对应 key
示例（只调大 xl 和 xxl）：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1280px, xxl: 1440px );
用 .container-fluid + 间距类替代更灵活
很多所谓“改容器宽度”，真实需求其实是“内容区撑得更开一点，又不想全屏”。这时硬改 .container 反而吃力不讨好。
-
.container-fluid本身无max-width，宽度恒为100%，但默认带padding-left/right: 15px - 组合工具类快速收放留白：
class="container-fluid px-5"把左右 padding 拉到3rem，视觉上比默认.container更宽松；px-0则彻底去掉内边距 - 注意：
.container-fluid不走$container-max-widths，也不受断点限制，它是另一条路径
真正容易被忽略的点是：改 $container-max-widths 后，必须确保你用的 Bootstrap 版本支持该变量（v5.1.0+ 稳定可用），且 Sass 编译后要实际检查渲染宽度——浏览器 DevTools 的 Computed 面板里看 max-width 值是否已更新，别只信代码写了没报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
