因为 .container 的 width 始终为 100%，但实际渲染宽度由断点媒体查询中的 max-width 决定；例如在 ≥1200px 视口下，computed width 显示 1140px，正是 @media (min-width: 1200px) {.container {max-width: 1140px}} 生效所致。
为什么 .container 的 computed width 显示不是 100%
因为 .container 的 width 确实是 100%，但浏览器开发者工具里看到的「实际宽度」是由 max-width 决定的——它被媒体查询层层覆盖，width: 100% 只是基础值，不参与最终渲染限制。
常见错误现象：
- 在 1400px 屏幕上 inspect
.container，computed width 显示1140px（而非 1400px） - 手动加
width: 100% !important，小屏下内容溢出，大屏下仍卡在 1140px - 用
getComputedStyle(el).width拿到的是固定 px 值，误以为 width 被“覆盖”了
真正起作用的是这些规则（Bootstrap 5.3+ 默认）：
@media (min-width: 576px) {
.container { max-width: 540px; }
}
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 992px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
你看到的「不是 100%」，其实是 max-width 在生效，不是 width 失效。
如何快速验证当前断点生效了哪个 max-width
打开浏览器 DevTools → Elements 面板 → 找到 .container → 切换到 Styles 标签页 → 滚动查看所有匹配的 CSS 规则，重点关注带 @media 的那几条。
关键判断点：
- 当前视口宽度刚好跨过某个断点（比如 1199px → 1200px），
max-width会跳变，不是渐进变化 - 如果用了
.container-lg，只看@media (min-width: 992px)及以上规则，更小断点下的max-width完全不生效 - 检查是否引入了自定义 Sass 编译后的 CSS —— 若改过
$container-max-widths变量，DevTools 里看到的值可能和官方文档不同
修改断点宽度时最容易踩的坑
直接覆盖 width 不解决问题，反而制造新问题：
-
.container { width: 1280px; }→ 小屏下强制拉宽，触发横向滚动条 - 只写一条
.container { max-width: 1280px; }→ 仅对默认断点（即无媒体查询的那条）生效，其他断点仍走原值 - 用
!important覆盖某一条max-width→ 其他断点规则仍存在，响应式逻辑断裂（比如 md 下是 720px，xl 下却还是 1140px） - 忘记清空浏览器缓存或使用 CDN 版本 → 本地写的 CSS 被远端 CSS 覆盖，DevTools 里看不到自己的规则
正确做法是复写对应断点的整块媒体查询，例如要让 xl 断点上限变成 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
为什么 .container-fluid 也没贴边
因为 .container-fluid 的 width: 100% 是真的，但它默认带 padding-left: 1.5rem 和 padding-right: 1.5rem（Bootstrap 5），所以视觉上不贴边。
这不是断点问题，而是内边距干扰：
- 必须加
px-0类清除左右 padding，不能只靠width: 100% - 如果父元素是
.container或带max-width的 wrapper，.container-fluid会被截断 —— 它再宽也超不出父级边界 - body 默认有
margin: 0，但某些重置 CSS 或 CMS 模板会加margin或padding，得一并检查
真正全屏需要三要素：容器用 .container-fluid + 清除内边距（px-0）+ 确保父链无宽度限制。少一个，就不是真全宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
