Bootstrap 5.3 六级断点为 xs:0px、sm:576px、md:768px、lg:992px、xl:1200px、xxl:1400px，均为 min-width 媒体查询触发值，修改需同步更新 $grid-breakpoints 和 $container-max-widths 才生效。
xs 到 xxl 的断点数值必须硬记，不是靠猜
Bootstrap 5.3 的断点是六级 min-width 媒体查询，每个后缀对应一个固定像素值，改了就全乱。你写 col-sm-6，生效与否只取决于当前视口宽度是否 ≥576px，跟设备叫“手机”还是“平板”无关。
-
xs：无媒体查询，兜底行为，等价于@media (min-width: 0px) -
sm：≥576px（大屏手机横屏、小平板竖屏） -
md：≥768px（iPad 竖屏、小笔记本） -
lg：≥992px（主流桌面最小宽度） -
xl：≥1200px（高分屏、大本常用起点） -
xxl：≥1400px（超宽显示器、TV UI 场景）
别信“sm 是 768px”这种过时说法——那是把 md 记混了。真正在控制 col-sm-* 的，永远是 576px。
为什么 .d-md-none 在某些安卓横屏手机上不生效
因为很多安卓手机横屏宽度卡在 720–767px，而 md 断点从 768px 才开始。这个区间既不满足 sm（576px 起），也不满足 md（768px 起），属于「断点间隙」。
- 现象：
.d-md-none在 750px 宽度下仍显示，但你预期它该隐藏 - 原因：断点是「向上生效」，不是「区间生效」；750px 属于 xs/sm 交界，但没到 md，所以规则不触发
- 解法：要么补
.d-sm-none覆盖更宽范围，要么用 JS +window.matchMedia手动处理这类边缘设备
container 最大宽度和断点不是一回事
很多人以为改了 $grid-breakpoints 里的 sm: 576px，.container 就自动变成 540px 宽——错。容器宽度由另一套变量 $container-max-widths 控制，两者完全独立。
-
$container-sm: 540px对应的是sm断点生效时的.container宽度，但它不随$breakpoint-sm自动变化 - 如果你把
$breakpoint-sm改成 600px，但没同步改$container-sm，结果就是：断点在 600px 触发，容器却还在 540px 宽度下撑开——视觉上就是布局错位 - 自定义断点时，必须同时更新两组 Sass map，否则响应逻辑就脱节
如何验证当前页面到底匹配哪个断点
Bootstrap 5.3 不提供现成的 --bs-breakpoint CSS 变量，不能靠 getComputedStyle 直接读。最稳的方式是手动检测媒体查询匹配状态。
- 按从大到小顺序查：
window.matchMedia('(min-width: 1400px)').matches→1200px→992px→768px→576px - 一旦某个为
true，就是当前生效的最高断点（比如 1000px 宽度会匹配lg，不匹配xl和xxl） - 别用
max-width反向推断，比如matchMedia('(max-width: 575.98px)')极其脆弱，CSS 浮点精度和缩放会导致误判
断点机制本身简单，但容易被“设备类型联想”带偏。真正起作用的只有那六个数字和 min-width 这个关键词——其它全是干扰项。
