.container断点宽度由$container-max-widths变量控制,实际值取决于CDN、自定义编译及Bootstrap版本;5.3+默认含xxl断点,预编译CSS中xs起始值为0px。

.container 的断点宽度不是写死的,而是由 $container-max-widths Sass 变量控制;你看到的实际值取决于是否用 CDN、是否自定义编译、以及 Bootstrap 版本(5.3+ 才默认含 xxl)。
Bootstrap 5.3+ 默认 .container 断点宽度表
以下为官方预编译 CSS(如通过 CDN 引入 bootstrap.min.css)中生效的值,单位均为 px:
-
xs( -
sm(≥ 576px):540px -
md(≥ 768px):720px -
lg(≥ 992px):960px -
xl(≥ 1200px):1140px -
xxl(≥ 1400px):1320px
注意:xxl 是 Bootstrap 5 新增断点,Bootstrap 4 中最大只到 xl(≥1200px,对应 1140px),数值看似一样,但断点触发条件已变——别直接套用旧项目经验。
为什么 DevTools 里看到的 max-width 和表里对不上?
常见原因不是断点错了,而是这些干扰项没排查:
- 父容器有
padding或overflow: hidden,视觉上“挤窄”了内容区,但.container自身max-width没问题 - 第三方 CSS(比如重置样式、UI 库、自己写的
div { max-width: 1200px })覆盖了 Bootstrap 的规则,务必在 DevTools 的 Computed 面板里看最终生效的是哪条 - 用了自定义 Sass 编译,但只改了
$grid-breakpoints却漏掉同步更新$container-max-widths,导致断点存在、宽度没跟上 - 误把
.container-fluid当成响应式容器——它压根不设max-width,永远是100%
.container-sm 到 .container-xxl 的行为陷阱
这类“断点容器”不是“升级式”,而是“起效式”:
-
.container-md在xs和sm下是100%,从md(≥768px)开始才应用720px,不会在lg下自动变成960px -
.container-lg在xxl断点下仍是960px,不会“智能扩容”——它只认自己声明的断点及更高 - 没有
.container-xs,因为xs是默认行为,.container本身就包含该逻辑 - 想让容器在
xxl下更宽(比如 1440px),不要写style="max-width: 1440px",而应重定义$container-max-widths后重新编译,或直接用.container-xxl+ 自定义 CSS 类封装
最易被忽略的点:断点宽度值本身可被 Sass 变量完全接管,但多数人只查文档表格,却没意识到自己项目里可能早被定制过——打开你项目的 _variables.scss 或构建配置,搜 container-max-widths,比对着干更可靠。


















