Bootstrap 5：可关闭警告（Alert Dismissable）的关闭按钮“X”不显示问题

核心问题原因 #

• 类名归属错误：你把btn-close类加到了alert容器#epo上，而这个类是专属关闭按钮的样式类，和alert容器的类混在一起后，直接导致按钮样式、位置异常。
• 关闭按钮结构缺失：Bootstrap的可关闭警告按钮必须包含<span aria-hidden="true">&times;</span>才能显示默认的X图标，你当前的按钮缺少这个关键元素；同时按钮的属性值未加引号，可能引发浏览器解析异常。
• DOM层级混乱：alert的正确结构是「alert容器」内部嵌套「关闭按钮」和「提示文本」，你当前的写法把按钮设为容器的HTML内容后再追加文本，导致元素层级关系错误。

修正后的代码 #

if(id == "108" ){
    // 构建正确的alert嵌套结构
    $("#epo")
        .addClass("alert alert-warning alert-dismissible fade show")
        .html(`
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            this is an EPO
        `);
    
    $("tr.child td.checkboxOut input").filter(function (index) {
        return $(this).attr("id") == id;
    }).val(time).css({
        "color": "rgb(42, 144, 85)",
        "text-align": "center",
        "border": "2px solid rgb(42, 144, 85)" // 修复原代码中缺失的闭合括号
    });
}else {
    BLAH BLAH BLAH
}

关键修复点说明 #

1. 拆分类名：alert系列类仅作用于容器#epo，btn-close类单独绑定到内部的关闭按钮。
2. 补全按钮结构：添加<span aria-hidden="true">&times;</span>，还原Bootstrap默认的X图标。
3. 规范属性写法：给所有HTML属性值添加引号，避免解析错误。
4. 修复CSS语法错误：补全border属性的闭合括号，确保样式生效。

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