Bootstrap 5 的断点是明确定义的六个 min-width 像素值：xs(0)、sm(576)、md(768)、lg(992)、xl(1200)、xxl(1400)，全部锚定在 $grid-breakpoints 变量上，媒体查询以 min-width 为唯一依据，且断点“向上生效”。
Bootstrap 5 的断点不是“大概范围”，而是明确定义的六个 min-width 像素值：xs（0）、sm（576）、md（768）、lg（992）、xl（1200）、xxl（1400）。写错一个像素，@media 就可能不生效，或者和 .col-md-6 类行为冲突。
Bootstrap 5 默认六个断点值必须硬记
别靠猜或查旧文档——所有行为都锚定在 Sass 变量 $grid-breakpoints 上，实际生成的 CSS 媒体查询以 min-width 为唯一依据：
-
xs：无媒体查询（min-width: 0），对应无前缀类如.col-6、.d-block -
sm：≥576px，覆盖横屏手机、小平板（如 Nexus 5X 横屏） -
md：≥768px，典型 iPad 竖屏起点，但很多安卓平板横屏也落在这个区间（如 800×1280 设备横屏 = 1280px 宽 → 实际触发lg） -
lg：≥992px，多数桌面浏览器最小宽度，iPad Pro 12.9" 横屏（1024px）刚好跨过此断点 -
xl：≥1200px，大屏/高分屏常见起点，可用来排除大部分平板 -
xxl：≥1400px，超宽显示器专用，v5 新增，xxl类不会在 v4 项目中生效
手写 @media 时最容易错的三件事
自己加媒体查询想覆盖或补充 Bootstrap 行为？下面这些坑几乎人人踩过：
- 写成
@media (max-width: 767px)—— 错。Bootstrap 是min-width向上生效，max-width会和默认类逻辑打架，且无法继承“向上覆盖”特性 - 抄错版本断点：用 Bootstrap 5 却照着 v4 文档写
@media (min-width: 768px)当作sm，结果发现.col-sm-6在 576px 就已生效，你的规则晚了 192px - 漏掉
viewport元标签：<meta name="viewport" content="width=device-width">缺失时，移动端用 980px 虚拟视口渲染，所有min-width查询直接失效
.d-md-block 在 767px 不显示？这是正常行为
断点是“最小宽度”，不是“区间”。.d-md-block 只在视口 ≥768px 时启用，767px 及以下就是 d-none（除非你显式写了 .d-sm-block 或更低断点类）。
立即学习“前端免费学习笔记（深入）”；
- 常见误判场景：一台 720×1280 安卓手机横屏，视口宽度 ≈ 720px → 属于
sm断点（576–767px），.d-md-block不生效 - 若想让某元素在“横屏手机 + 小平板”都显示，改用
.d-sm-block；若只给桌面，用.d-lg-block（≥992px）更稳妥，能避开 iPad Pro 12.9" 横屏（1024px） -
.d-none必须配合断点类使用，单独写.d-none会全局隐藏，再写.d-md-block也无法恢复（CSS 优先级相同，后者不覆盖前者）
自定义断点前先确认是否真需要
改 $grid-breakpoints 看似灵活，但代价明确：
- 所有工具类（
col-*、gap-*、text-center等）都会重建，node_modules 里 bootstrap.css 会被重编译 - 第三方组件库（如 react-bootstrap、vue-bootstrap）可能仍按默认断点生成 class，导致样式断裂
- 更轻量的做法：用
@include media-breakpoint-up(md)（Sass）或直接抄源码里的像素值写媒体查询，避免动全局变量 - 真要调断点？优先微调单个组件的媒体查询，比如把某区域切换点设为 1024px，就写
@media (min-width: 1024px)，而不是推翻整个$grid-breakpoints
断点值本身不难记，难的是理解“min-width 向上生效”和“无 xs 前缀即默认”这两个底层逻辑——几乎所有响应式失效问题，根源都在这里漏了一环。
