btn-outline-* 类实际是整套状态样式重置：默认透明背景+主题色边框/文本，悬停时切换为实色背景+反色文本；常见问题多因CSS优先级覆盖或版本混用导致。
btn-outline-* 类的实际渲染逻辑
Bootstrap 的 btn-outline-* 不是简单“加个边框”，而是整套状态样式重置：默认透明背景 + 主题色边框/文本，悬停时切换为实色背景 + 反色文本。如果你只看到边框没变色、或悬停无反应，大概率是 CSS 优先级被覆盖，或用了错误的 Bootstrap 版本（比如混用 v4 和 v5 的类名）。
常见问题包括：btn-outline-primary 悬停后背景还是白的、点击后文字发灰、禁用状态下边框消失。这些都不是 bug，而是你项目里其他样式（比如自定义 .btn 规则、重置 CSS、或第三方 UI 库）干扰了 Bootstrap 原生状态链。
btn-outline-* 在不同 Bootstrap 版本中的兼容性差异
v4 和 v5 都支持 btn-outline-*，但细节有区别：
- v4 中
btn-outline-dark悬停背景是#343a40，v5 改为更接近语义的深灰（#212529） - v5 移除了
btn-block，改用d-block w-100；如果你在 v5 里还写btn-outline-primary btn-block，按钮会撑宽，但 class 本身无效（不报错，但冗余） - v4 的
btn-outline-light默认边框极浅（#f8f9fa），在白底上几乎不可见；v5 调整了 contrast，更可靠
禁用 outline 按钮时的正确写法
禁用 btn-outline-* 按钮，必须用 HTML 属性 disabled，不能只靠加 disabled class —— 否则边框和文字颜色不会自动变灰，交互也拦不住。
正确示例：
<button type="button" class="btn btn-outline-success" disabled>已提交</button>
错误做法：
- 只写
class="btn btn-outline-success disabled"（v5 中disabledclass 已废弃） - 用 JS 动态移除
btn-outline-success再加其他类模拟禁用（破坏语义、无障碍不友好、焦点行为异常） - 通过
opacity: 0.6伪装禁用（键盘仍可 focus，屏幕阅读器无法识别状态）
自定义 outline 按钮时最容易漏掉的三件事
想改 btn-outline-primary 的边框粗细、圆角或悬停过渡时间？别直接覆盖所有伪类，先确认这三点：
- 必须重写
:hover和:active下的background-color、border-color、color三者，缺一不可 - 如果用了 Sass，优先修改
$theme-colors和$enable-shadows变量，而不是硬写 CSS —— 否则btn-outline-warning等其他变体不会同步更新 - 移动端点击反馈（
:active）常被忽略：iOS Safari 下若没设transition或-webkit-tap-highlight-color，会卡顿或无响应
复杂点在于：outline 按钮的状态样式不是孤立规则，而是嵌套在 .btn:not(:disabled):not(.disabled) 这类选择器链里，局部覆盖容易漏掉某个分支。真要定制，建议从 Bootstrap 官方 Sass 源码里抽对应 mixin，而不是手写一堆 !important。
