bootstrap 5.3 默认断点像素值为：xs: 0px、sm: 576px、md: 768px、lg: 992px、xl: 1200px、xxl: 1400px，对应最小宽度媒体查询，且断点与容器最大宽度需同步更新以确保响应式效果一致。
Bootstrap 5.3 的断点像素值是多少
Bootstrap 5.3 官方定义的断点（breakpoints）是六级：xs、sm、md、lg、xl、xxl，对应 $grid-breakpoints Sass 变量中的数值。这些值决定所有响应式类（如 col-md-6、d-xl-none）何时生效。
默认 px 值如下（注意：这是 最小宽度，即 @media (min-width: ...)）：
-
xs: 0px（无媒体查询，所有尺寸兜底） -
sm: 576px -
md: 768px -
lg: 992px -
xl: 1200px -
xxl: 1400px
这个序列在 scss/_variables.scss 中以 map 形式声明：$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)。你改它，整个栅格系统就跟着变。
为什么用 576px 而不是 768px 作为 sm 起点
这是 Bootstrap 5 和 4 的关键区别之一。早期版本（如 v4）把 sm 设为 576px，但有人误记成 768px——后者其实是 md 的起点。若你在自定义媒体查询里写 @media (min-width: 768px) 却想匹配 sm 类行为，结果就是规则永远不触发，因为 sm 实际从 576px 就开始了。
- 真正影响
col-sm-6的是min-width: 576px，不是 768px -
col-md-6才对应min-width: 768px - 如果你抄了旧教程或混用了 v4 文档，很容易在断点判断上错一档
如何验证当前页面用的是哪个断点
最直接的方式是用浏览器开发者工具检查 body 或容器元素是否被加上了 col-*、d-*-block 等类，再对照屏幕宽度看是否符合预期。更稳妥的是加一段调试 JS：
console.log('width:', window.innerWidth);
console.log('breakpoint:', getComputedStyle(document.body).getPropertyValue('--bs-breakpoint'));
不过 Bootstrap 5.3 并不原生注入 CSS 变量表示当前断点，所以更实用的做法是手动检测：
- 用
window.matchMedia('(min-width: 1400px)').matches判断是否进入xxl - 按顺序从大到小查，比如先查
xxl，再xl，最后xs（即!sm） - 注意：
xs是兜底，没有max-width限制，所以别用max-width: 575.98px这种脆弱写法
修改断点后 container 最大宽度会自动同步吗
不会。断点（$grid-breakpoints）和容器宽度（$container-max-widths）是两个独立 Sass map。改了 sm: 576px，不代表 .container 在 576px 下自动变成 540px 宽——那个值由 $container-max-widths 控制，它默认是 (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px)。
- 两者键名必须一致（比如都含
sm），否则缺失键会回退到 Bootstrap 默认值 - 如果只调大
sm断点到640px，但没同步更新$container-max-widths: (sm: 576px)，那.container在 640px 屏幕下仍按 576px 的逻辑取宽，视觉上会“卡住” - 纯 CSS 引入（没走 Sass 编译）时，只能靠媒体查询硬覆盖，例如：
@media (min-width: 640px) { .container { max-width: 576px; } }
断点值本身不“智能”，它只是 CSS 规则的开关；真正起作用的是你有没有让所有相关变量/规则同步更新。
