尝试关闭时警报不会关闭

Question

我有一个 alert 有两个问题，第一个是当我点击 "X" 按钮。我正在使用 Bootstrap 5

这是代码

{{#if success}}
<div class="container p-4">
  <div class="row">
    <div class="col-md-auto mx-auto">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{success}}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span area-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>
{{/if}}

我正在调查，这似乎是因为我没有使用 bootstrap 脚本，但我当时确实有它，所以我寻找最新版本并将其放在我的项目的 layout/main.hbs 中，就在调用局部视图或其他视图的位置下方（在 <body> 中）

这是我在 Bootstrap 文档中找到的脚本，即使使用它也无法正常工作

<!DOCTYPE html>
<html lang="en">

<head>...</head>

<body style="background-color:#2e2c25"> {{!-- #212529 navbar --}}

    {{> navigation }}

    {{{ body }}}

    {{!-- Scripts --}}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

我试图找出我的一些错误，但没有发现任何可能影响它的错误

我对那个警报的另一个问题是 "X" 出于某种原因看起来不太漂亮，它看起来是一个白色的方块，而且有很多右边的间距，但这很小，现在我只对能够关闭的警报感兴趣

Answer 1

试试这个因为你可以使用 Bootstrap 5

 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Answer 2

删除<span area-hidden="true">×</span>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
{{#if success}}
<div class="container p-4">
  <div class="row">
    <div class="col-md-auto mx-auto">
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{success}}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      
      </div>
    </div>
    
  
  </div>
</div>
{{/if}}

  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

尝试关闭时警报不会关闭

Alert does not close when trying to close it

html

bootstrap-5

hbs