bootstrap断点仅基于min-width单向生效，非区间控制；如md断点（≥768px）会持续生效直至被更高断点覆盖，需手动组合d-none d-md-block d-lg-none等类实现精确显隐，不可依赖max-width隐式截断。
Bootstrap断点只认 min-width，不自动处理 max-width 区间
Bootstrap 的断点不是「区间」，而是单向阈值。你看到的 .col-md-6 或 .d-lg-none 背后，全是 @media (min-width: 768px) 这类规则，没有隐式 and (max-width: 991px)。这意味着：一旦触发 md 断点，它会一直生效，直到被更高断点的样式覆盖。
常见错误现象：
- 在平板（~800px）上
.d-md-block生效了，但桌面端（1440px）也显示——因为没写.d-lg-none覆盖 - 自己手写
@media (min-width: 768px) and (max-width: 991px)模拟「md only」，结果和 Bootstrap 内置类行为不一致
实操建议：
- 优先用 Bootstrap 原生类组合控制显隐，比如
d-none d-md-block d-lg-none - 若需精确区间，自己定义媒体查询时，必须显式写出
and (max-width: ...)，且注意断点数值要和 Bootstrap 源码对齐（md是768px起，lg是992px起） - 别依赖「断点名 = 设备类型」，
sm不代表 iPhone，只代表 ≥576px 的视口宽度
Bootstrap 5 默认断点值与对应 media query
Bootstrap 5 的断点定义在 _variables.scss 中，编译后生成的 CSS 就是这些 @media 规则。关键数值如下（单位 px）：
-
xs：无媒体查询（默认，） -
sm：@media (min-width: 576px) -
md：@media (min-width: 768px) -
lg：@media (min-width: 992px) -
xl：@media (min-width: 1200px) -
xxl：@media (min-width: 1400px)
注意：xs 没有 @media 包裹，它是基础样式；其余全部是 min-width 向上生效。如果你删掉 xxl 断点，xl 的样式会一直延续到超大屏，不会自动截断。
为什么不能直接用 max-width 写断点？
Bootstrap 采用移动优先 + min-width 递进，是为了避免样式层叠冲突和维护成本。如果用 @media (max-width: 767px) 定义手机样式，那所有后续断点都得用 !important 或更具体选择器去覆盖，极易失控。
典型问题：
- 自己加了一条
@media (max-width: 767px) { .card { padding: 8px; } }，结果在 576px–767px 之间，.card同时受基础样式和这条规则影响，padding 变成双倍 - 团队协作时，有人写
max-width，有人写min-width，最终样式走向不可预测
实操建议：
- 保持统一：项目中所有自定义媒体查询也走
min-width递进路线 - 如真需
max-width场景（比如仅针对小屏隐藏某模块），用@media (max-width: 575.98px)，避免和xs断点重叠 - 检查浏览器开发者工具的「Computed」面板，确认最终生效的是哪条规则、来自哪个媒体查询
自定义断点时最容易忽略的编译依赖
改 $grid-breakpoints 变量后，光改 SCSS 不够。Bootstrap 的栅格类（如 .col-lg-4）、间距工具（.p-lg-3）、显示工具（.d-xl-flex）全靠这个变量生成。漏掉重新编译，新断点不会产出对应类名。
常见疏漏点：
- 只改了
_variables.scss，但没运行npm run build或sass编译命令 - 用了 CDN 版本，却试图通过 JS 动态插入
@media规则——CDN 的 CSS 是静态产物，无法运行时修改断点逻辑 - 调整了
lg从992px改为1024px，但忘了同步更新$container-max-widths，导致.container在 1024px 下仍用旧宽度
验证方式：查看编译后 CSS 文件中是否出现 @media (min-width: 1024px)，以及是否存在 .col-custom-6 类（如果你新增了断点名）。
