Bootstrap 5 默认有6个断点，即xs、sm、md、lg、xl、xxl，对应像素值分别为0、576、768、992、1200、1400；其中xs无需媒体查询，故实际生成5组@media规则。
Bootstrap 5 默认有几个断点？答案是 6 个
不是 5 个，也不是 4 个——$grid-breakpoints 变量明确定义了 xs、sm、md、lg、xl、xxl 共 6 个断点。虽然文档里常提“5 个响应式断点”，那是指「需要媒体查询的断点数量」：因为 xs 对应 min-width: 0，无需写 @media，所以实际生成的 CSS 媒体查询规则只有 5 组。
断点值是多少？别信模糊说法，直接看源码定义
所有断点像素值都来自 Sass 变量 $grid-breakpoints，默认值如下（单位全是 px）：
xs: 0sm: 576md: 768lg: 992xl: 1200xxl: 1400
注意：sm 起是 min-width，所以 .col-sm-6 在宽度 ≥576px 时生效，并**持续生效到更大屏幕**（不会在 md 断点被覆盖，除非你显式写了 .col-md-4）；而 .col-6（无断点前缀）只在 xs 下起作用，即 <576px 时才生效。
为什么改断点容易出问题？关键在依赖链
修改 $grid-breakpoints 看似简单，但会连锁影响：
- 所有基于断点的工具类（如
.d-sm-none、.g-md-3）都会按新值重新编译 -
container宽度由$container-max-widths控制，它默认继承$grid-breakpoints，但未同步更新会导致容器错位 - 如果你用的是 CDN 引入的
bootstrap.min.css，改 Sass 变量完全无效——必须自己编译 CSS - 某些第三方组件（比如日期选择器弹层）内部硬编码了断点判断逻辑，可能不兼容自定义值
常见错误现象：xxl 改成 1600 后，.container-xxl 没变宽，就是因为忘了同步改 $container-max-widths 里的对应项。
怎么验证当前项目用了哪套断点？
最直接的办法不是查文档，而是打开浏览器开发者工具，检查一个带断点的类（比如 .col-lg-4）的计算样式，看它在哪条 @media 规则下生效；或者在控制台运行：
getComputedStyle(document.documentElement).getPropertyValue('--bs-breakpoint-lg')
如果返回空，说明你用的是 CSS 版本（无 CSS 变量），就得翻你本地的 _variables.scss 或确认 CDN 版本号——不同 minor 版本（如 5.3.x vs 5.2.x）断点值可能微调过，比如 xxl 在部分早期 5.x 版本中是 1200，后来才统一为 1400。
断点这事，改起来就一行变量，但漏掉依赖项或环境差异，就容易让布局在某个尺寸上突然塌陷——得一个个对齐，不能只改一半。
