断点本质是媒体查询的宽度阈值，即一组@media (min-width:...px)规则，仅响应视口宽度，向上生效且依赖viewport标签。
断点本质是媒体查询的宽度阈值
Bootstrap 的断点不是魔法，就是一组 @media (min-width: ...px) 规则。你看到的 .col-md-6、.d-lg-none 这些类，背后全靠这些查询生效。比如 .container 在 ≥768px 时设 max-width: 720px，就是靠 @media (min-width: 768px) 包裹的 CSS。
这意味着：断点只响应「视口宽度」，不看设备类型、DPR、横竖屏状态（除非你额外写查询）。它也不管你有没有加 <meta name="viewport"> —— 没这行，移动端会以 980px 虚拟视口渲染，所有断点直接失效。
- 断点是“向上生效”的：定义了
sm（≥576px），那 576px、1000px、2000px 都匹配，不会在 xl 断点自动“关闭” sm 的样式 - 默认没有“xs”前缀类：
.col-6就是 xs 断点（ - 断点之间有间隙：比如 768px ≤ width
Bootstrap 5 的标准断点值必须记牢
别靠猜，六个断点的数值和行为边界直接影响 display 类、栅格列、间距工具是否按预期工作。尤其要注意「最小宽度」和「包含关系」：
-
xs：无前缀， -
sm：≥ 576px（含横屏手机、小平板） -
md：≥ 768px（典型 iPad 竖屏、小笔记本） -
lg：≥ 992px（多数桌面浏览器最小宽度） -
xl：≥ 1200px（大屏、高分屏常见起点） -
xxl：≥ 1400px（超宽显示器，v5 新增）
容易踩的坑：.d-md-block 在 768px 宽度生效，但很多安卓横屏手机刚好卡在 720–767px，此时它还是 d-none；真要覆盖这部分设备，得用 .d-sm-block 或手动补媒体查询。
为什么 .d-none .d-lg-block 比 .d-md-block 更安全
因为 md 断点（≥768px）会把部分横屏手机和平板也卷进来。比如一台 800×1280 的安卓平板，竖屏是 md，横屏就变成 lg —— 但如果你只想让 PC 显示，不该让它在平板横屏时也出现。
.d-none .d-lg-block 的组合逻辑更干净：
-
.d-none先全局关掉显示 -
.d-lg-block只在 ≥992px 才打开，基本排除了绝大多数平板（iPad Pro 12.9" 横屏是 1024px，刚好跨过 lg） - 如果项目明确支持 iPad Pro，可升级为
.d-xl-block（≥1200px），避免误触
别用 .hidden-lg 或 .visible-xs —— 这些是 Bootstrap 3 的遗物，v4/v5 里完全无效，写了等于白写。
自定义断点前先确认是否真需要改
改 $grid-breakpoints SCSS 变量确实能重定义断点，但代价不小：所有依赖断点的工具类（col-*、text-*、gap-*）都会重建，还可能和第三方组件库冲突。
更常见的需求其实是微调，而不是推翻重来：
- 想让某区域在 1024px 切换？不用改全局断点，加个
@media (min-width: 1024px)覆盖即可 - 发现
lg（992px）太早导致桌面端布局被压缩？优先检查是不是容器用了.container-fluid或漏了viewportmeta - 多个项目共用同一套断点？建议抽成独立 SCSS 文件导入，而非硬编码进每个项目
真正要动断点的时候，记得同步更新 $container-max-widths 和栅格列数计算逻辑，否则 .container 宽度和 .col-lg-6 实际占位会不一致。
