Bootstrap 5 默认有6个断点：xs(0)、sm(576px)、md(768px)、lg(992px)、xl(1200px)、xxl(1400px)，均基于min-width媒体查询。
Bootstrap 5 的断点 px 值是多少（默认）
Bootstrap 5 官方默认的断点阈值是基于 min-width 媒体查询的，所有断点都对应 CSS 中的 px 值（非 em 或 rem），且不包含 px 单位后缀——这是 Sass 变量定义方式决定的。
实际生效的像素临界值如下（注意：每个断点「起始生效」，比如 sm 在屏幕宽度 ≥576px 时才触发）：
-
xs: 无媒体查询（0px起，即始终生效） -
sm:576px -
md:768px -
lg:992px -
xl:1200px -
xxl:1400px
这些值定义在 Bootstrap 源码的 _variables.scss 中，例如：$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)。如果你用的是 CDN 引入的 CSS，这些断点已编译进媒体查询规则里，无需额外操作。
为什么用 min-width 而不是 max-width
Bootstrap 5 改为移动优先 + min-width 断点，是为了避免断点嵌套混乱和覆盖冲突。这意味着：
- 所有类名（如
col-sm-6）在「当前断点及以上」都生效，而不是仅限该断点区间 -
col-6（无断点前缀）只在xs生效；col-sm-6在sm及更大屏幕都生效 - 不会出现「
md生效但lg失效」这种反直觉行为 - 自定义断点时，必须保持升序，否则 Sass 编译会报错：
"Breakpoint names must be in ascending order"
如何查自己项目里实际生效的断点值
如果你用了自定义主题、修改了 _variables.scss，或引入了第三方覆盖样式，实际断点可能已变更。最可靠的方式是直接检查生成的 CSS 媒体查询：
- 打开浏览器开发者工具 → Elements → 找一个带
col-md-*的元素 → 查看 computed 样式中flex-basis的响应逻辑 - 或搜索 DevTools 的 Styles 面板中类似
@media (min-width: 768px)的规则 - 若使用 Sass 构建，可打印变量：
@debug $grid-breakpoints;（需在构建日志中查看输出）
注意：某些 UI 库（如 BootstrapVue / React-Bootstrap）可能封装了断点逻辑，其内部仍依赖原始 Sass 变量，但 JS 层调用时传参名未必一致，别直接假设 sm 对应 576 —— 先验证。
常见误用：把断点当「区间」来写媒体查询
有人习惯写 @media (min-width: 576px) and (max-width: 767.98px) 来模拟 sm 独占，这在 Bootstrap 里是错的。原因：
- Bootstrap 的
col-sm-6会在 576px、768px、992px … 所有更大断点下持续生效，除非被更高优先级规则覆盖 - 手动加
max-width不仅冗余，还容易因小数精度（如 767.98px）导致边界失效 - 真要限制区间，应该用更具体的类组合，比如：
col-sm-6 col-md-4（sm下占 6 列，到md就自动收窄）
断点设计本意是「渐进增强」，不是「精确切片」。强行切片反而破坏栅格一致性，也增加维护成本。
