Bootstrap Alert组件：关闭按钮显示异常问题求助

你的问题主要有两个原因，对应解决步骤如下：

• 未引入Bootstrap CSS文件
  Bootstrap组件的样式完全依赖官方提供的CSS文件，你当前仅引入了Bootstrap的JS文件，没有加载CSS，导致关闭按钮无法应用正确的样式，呈现出灰色大方块。需要在页面的<head>标签中添加Bootstrap CSS的CDN链接。

• 使用了Bootstrap 4的旧版类名与属性
  你使用的是Bootstrap 5.3.0-alpha3版本，但代码里用的是Bootstrap 4的语法：

  • 关闭按钮的类名从close改为btn-close
  • 关闭触发属性从data-dismiss="alert"改为data-bs-dismiss="alert"

修正后的完整代码示例：

<head>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
  <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
  </ul>

  <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Alert!</strong> 
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
  </div>

  <!-- 保留原Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>

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