Bootstrap Alert组件关闭图标出现异常边框问题求助

问题现象 #

Alert组件的关闭图标周围出现异常边框（如下截图），但该图标在其他场景下显示正常：

异常边框截图：

正常显示截图：

相关代码直接复制自Bootstrap 4.0官方文档，页面同时引入了Bootstrap 5.3.0-alpha1的CSS和Bootstrap 4.0的JS，硬编码alert类型无法解决问题。

核心原因 #

跨版本混用导致的冲突：Bootstrap 5的CSS与Bootstrap 4的JS不兼容，两者对关闭按钮的样式逻辑、交互处理存在差异，最终导致图标边框异常渲染。

解决方案 #

1. 统一Bootstrap版本（推荐） #

彻底解决版本冲突问题，要么全量使用Bootstrap 4.x套件，要么整体升级到Bootstrap 5.x版本，禁止跨版本混搭CSS和JS。

示例（使用Bootstrap 4.0完整套件）：

<!-- Bootstrap 4.0 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<!-- 依赖脚本 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<!-- Bootstrap 4.0 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

2. 临时样式修复（应急方案） #

如果暂时无法调整版本，可以通过自定义CSS覆盖异常样式，隐藏边框：

.alert .close:focus {
    outline: 0;
    box-shadow: none;
}

注意：此方法仅能临时掩盖问题，无法解决跨版本混用带来的其他潜在兼容性问题，不建议长期使用。

内容的提问来源于stack exchange，提问作者AlphabetsAlphabets