0

我有一个警报有两个问题，第一个是当我单击“X”按钮时它没有关闭。我正在使用引导程序 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}}

我正在调查，这似乎是因为我没有使用引导脚本，但我当时确实有它，所以我查找了最新版本并将其放在layout/main.hbs我的项目中，就在部分或其他的下面视图被称为 (In <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”由于某种原因看起来不漂亮，它看起来是一个白色方块，右边有很多间距，但这很小，现在我只对能够关闭的警报感兴趣

4

2 回答 2

2

消除 <span area-hidden="true">&times;</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>

于 2022-01-05T05:52:17.780 回答
2

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

 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
于 2022-01-05T04:40:32.367 回答