自定义断点需严格匹配 $grid-breakpoints 值写媒体查询，用 @include media-breakpoint-up(md) 最安全；渐变仅设 background-image，小屏用 background-color 回退；类名应含断点、方向、颜色三要素如 bg-md-to-r-blue-indigo；按钮需重置 background-color: transparent !important 并补全伪类。
Bootstrap 自定义断点怎么写媒体查询
Bootstrap 默认断点（sm、md、lg）是固定的像素值，但如果你在 Sass 中重定义了 $grid-breakpoints，比如把 md 改成 840px，那所有依赖它的逻辑（包括你手写的媒体查询）都得同步更新，否则渐变不会在预期宽度触发。
关键不是“能不能写”，而是“写对没”。常见错误是直接抄网上示例的 @media (min-width: 768px)，结果你的项目里 md 已经是 840px，小屏用户永远看不到渐变。
- 查清当前项目实际断点值：打开编译后的 CSS 搜索
--bs-breakpoint-md，或在 Sass 中看$grid-breakpoints定义 - 媒体查询必须严格匹配该值，例如
@media (min-width: 840px)，不能四舍五入或凭记忆写 - 用 Sass 的
@include media-breakpoint-up(md)最安全——它自动读取变量，避免硬编码 - 别在 CSS 文件里混用
768px和840px，否则调试时会怀疑人生
background-image 怎么和自定义断点配合生效
渐变本质是 background-image，不是 background-color。自定义断点下，你得确保这个属性只在目标宽度被注入，且不覆盖已有颜色回退逻辑。
错误做法是写 background: linear-gradient(...) —— 它会清掉 background-color，导致小屏没 fallback；正确路径是只动 background-image，让基础色始终兜底。
- 小屏态必须先声明
background-color（如.hero { background-color: #fff; }），写在媒体查询外 - 媒体查询内只写
background-image: linear-gradient(135deg, #0d6efd, #6f42c1)，不碰其他 background 属性 - 方向优先用角度（
135deg），不用to right—— 自定义断点常对应老旧设备兼容需求，角度更稳 - 如果用了深色模式，还得额外加
@media (prefers-color-scheme: dark)块，重新定义渐变色值，否则暗色下蓝紫渐变可能糊成一片
自定义类名怎么命名才不冲突
Bootstrap 不提供 bg-md-gradient-primary 这类带断点前缀的类，你手动定义时，名字得能一眼看出断点、方向、颜色三要素，同时避开 Bootstrap 原生类名和未来可能的升级冲突。
比如 bg-md-to-r-blue-indigo 就比 bg-custom-grad 更实用：前者明确表示“md 起从左到右、蓝到靛青”，后者连你自己一个月后都得翻源码猜。
- 类名中段用
to-r/to-b表示方向，不用right/bottom—— 短且不易和工具类（如text-right）混淆 - 颜色部分用具体色值缩写（
blue-indigo）而非语义名（primary-secondary），避免主题切换时失效 - 务必加
!important：Bootstrap 的bg-white、bg-light都带!important，你的规则权重不够会被静默覆盖 - 使用时 class 顺序很重要：
class="bg-md-to-r-blue-indigo bg-white"—— 自定义类在前，保底色在后，否则小屏 fallback 失效
按钮上怎么用自定义断点渐变
bg-gradient 类对 .btn 完全无效，因为 Bootstrap 的按钮用 !important 锁死了 background-color，且不响应 background-image。想在按钮上实现“仅 md+ 渐变”，得绕过工具类，直写 CSS。
核心是两步：先清掉原生背景锁定，再注入渐变，且必须单独处理伪类状态，否则悬停时按钮变透明。
- 必须写
background-color: transparent !important，否则渐变被纯色盖住 - 用
background-image: linear-gradient(90deg, #0d6efd, #20c997) !important注入渐变 - 补全
.btn-gradient:hover和.btn-gradient:active，否则交互时背景消失 - 保留边框（如
border: 1px solid rgba(13, 110, 237, 0.3)），不然按钮在浅色渐变下容易“隐形”
真正麻烦的不是写法，而是每次改断点值，这些按钮样式里的媒体查询也得同步改——建议抽成 Sass mixin，别散落在多个文件里。
