javascript - 关闭按钮未显示在 Bootstrap 可关闭警报上，但功能正常

Question

我正在为登录表单使用 bootstrap dismissible alerts。一切都按预期工作，除了关闭按钮没有正确显示但可以关闭警报。

我在学习类(class)时使用 EJS 框架和旧版本的 Bootstrap。

<link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css">

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHaiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

感谢任何帮助

Answer 1

在 Bootstrap 中添加取消/关闭字符作为 SVG 图标的 CSS alert docs您使用的版本中似乎没有。

您可以添加 Unicode character手动。请注意，我还添加了 btn 类，这是基本 Bootstrap button 所必需的样式。

<link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css">

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="btn btn-close" data-dismiss="alert" 
    aria-label="Close">✕</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHaiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>