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

Question

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

我正在使用 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 alert docs 中添加 cancel/close 字符作为 SVG 图标的 CSS 在您使用的版本中似乎不存在.

您可以添加 Unicode character manually. Note that I also added the btn class, which is required for basic 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>

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

Close button not displaying on Bootstrap dismissible alert but functions properly

javascript

ejs

node.js

bootstrap-4