直接写@media (min-width: 768px)不稳妥，因Bootstrap断点由$grid-breakpoints变量统一管理，硬编码像素值会导致与d-md-none等工具类行为不一致；应使用@include media-breakpoint-up(md)混入，自动同步项目配置。
为什么直接写 @media (min-width: 768px) 不够稳妥
Bootstrap 的断点值不是固定死的魔法数字，而是由 Sass 变量统一管理的。如果你硬编码 768px，但项目里改过 $grid-breakpoints 或覆盖了 $breakpoint-md，你的媒体查询就跟 Bootstrap 自身的 d-md-none 类行为不一致了——结果就是“明明写了 d-md-none，元素在 768px 还没隐藏”。断点不统一，响应式就不可信。
media-breakpoint-up 混入的正确用法
Bootstrap 5+ 提供了官方 Sass 混入 media-breakpoint-up，它会自动读取当前项目配置的断点变量，确保你写的和框架用的是同一套逻辑。
- 语法是
@include media-breakpoint-up(md) { ... }，不是@include media-breakpoint-up(768px) - 它底层展开为
@media (min-width: var(--bs-breakpoint-md))（CSS 变量版）或@media (min-width: $breakpoint-md)（Sass 版），完全跟随项目配置 - 别漏掉括号里的断点别名：xs / sm / md / lg / xl / xxl，大小写敏感，不能写成
MD或medium
示例：
@include media-breakpoint-up(md) {
.my-header {
display: none;
}
}
常见错误：混入嵌套位置不对导致 CSS 生成失败
Sass 混入必须放在能生成 CSS 规则的位置，不能直接塞进属性值或函数调用里。下面这些写法都会报错或静默失效：
- 错：
display: @include media-breakpoint-up(md) { none; };（混入不能当值用） - 错：
.my-el { @include media-breakpoint-up(md) { &.active { color: red; } } }（嵌套层级错，& 会指向外层选择器，不是你想要的媒体查询内 .my-el.active） - 对：把混入放在顶层或独立选择器块里，让它生成完整的
@media块
和 d-{breakpoint}-{value} 类共存时要注意类顺序
如果你在 HTML 里同时用了 d-none d-lg-block，又在 Sass 里用 @include media-breakpoint-up(lg) 覆盖同一个元素的 display，最终效果取决于 CSS 特异性与加载顺序。Bootstrap 的工具类带 !important（v4/v5 默认开启），而你自己写的混入规则没有——所以你的规则大概率被覆盖。
- 要么关掉 Bootstrap 工具类的
!important（设$enable-important-utilities: false） - 要么别混用：纯 Sass 控制就全用混入；需要 HTML 快速切换就只用
d-类，不额外写媒体查询 - 注意：
d-lg-block表示「lg 及更大断点显示」，而@include media-breakpoint-up(lg)也从 lg 开始生效，二者语义一致，但实现层不互通
真正容易被忽略的是：Sass 混入生成的 CSS 必须随主样式表一起编译输出，如果用的是 CDN 引入 Bootstrap CSS、再单独 link 你自己的 Sass 文件，那混入根本不会生效——浏览器压根看不到那些规则。
