bootstrap 5 的 .btn-close 改颜色需重设 css 变量 --bs-btn-close-color（最干净）、覆盖 background-image（最稳）或用伪元素重绘（轻量但需校准），直接写 color 或 background-color 无效。
Bootstrap 5 的 .btn-close 怎么改颜色
直接给 .btn-close 写 color 或 background-color 基本无效——v5.3+ 默认用 background-image 渲染 SVG 图标，不是文字；就算你用的是 v4 的 .close，它也靠 ::before 插入字符，且被 opacity: .5 和固定 line-height 锁死样式链。
真正起效的方式只有三种，按推荐顺序：
- 重设 CSS 变量（最干净）：
:root { --bs-btn-close-color: #dc3545; }，所有.btn-close自动响应，包括 Toast、Alert 里的关闭按钮 - 覆盖
background-image（最稳）：解码原 SVG，改fill值后重新 base64 编码，再赋给.btn-close的background-image - 用伪元素重绘（轻量但需校准）：
.btn-close::before { content: "✕"; font-size: 1.5rem; line-height: 1; color: #0d6efd; }，必须加background: none清掉原图标，否则双图标叠加
注意：如果用了 ::before 或 ::after，line-height: 1 和 position: absolute + transform: translate(-50%, -50%) 缺一不可，否则 × 会偏移或截断。
.btn-close 点击没反应？先查这三处
不是 JS 报错，而是 CSS 静默拦截了事件。常见原因有：
-
.btn-close::before或::after被误加了pointer-events: none——删掉，事件应由按钮本体触发 - 伪元素设置了
z-index且值过大，盖住了按钮本身；检查是否意外给::before加了z-index: 1 - 父容器有
pointer-events: none（比如某些模态框遮罩层未正确释放），用浏览器开发者工具逐层检查pointer-events计算值
验证方法：临时加 .btn-close { outline: 2px solid red !important; }，点击时看焦点框是否出现。不出现，说明事件根本没到按钮上。
用 data-bs-dismiss="alert" 还是手动调 bootstrap.Alert.getInstance(el).close()
自动 dismiss 看似省事，但实际埋了三个坑：
- 关闭后 DOM 节点被移除（不是隐藏），下次想复用就得重新创建，无法动态更新内容
- 动画结束后不会重置
alert-dismissible所需的fade show类，再次显示会丢失淡入效果 - 无法插入业务逻辑，比如“删除前确认”，
data-bs-dismiss是硬绑定，没法拦截
建议默认用手动方式：const alert = bootstrap.Alert.getInstance(el); alert.close();。需要复用时，只用 el.classList.remove("d-none") 显示，配合 el.textContent = "新提示" 更新内容，避免重建节点。
为什么别在 :root 里随便改 --bs-btn-close-color
这个变量看起来简单，但它直接影响所有使用 .btn-close 的组件：Alert、Toast、Offcanvas —— 甚至第三方插件里借用了该类的按钮也会变色。更关键的是，它不自动适配深色模式。
如果你的站点支持 prefers-color-scheme，必须显式补媒体查询：
:root {
--bs-btn-close-color: #6c757d;
}
@media (prefers-color-scheme: dark) {
:root {
--bs-btn-close-color: #adb5bd;
}
}
漏掉这点，深色模式下关闭按钮可能变成黑底黑叉，彻底不可见。而这种问题在线上环境才容易暴露，开发时往往只在默认主题下测试。
