Bootstrap 5 警报未显示答案

【问题标题】：Bootstrap 5 Alert Not Showing UpBootstrap 5 警报未显示
【发布时间】：2021-03-22 22:48:30
【问题描述】：

因此，当我尝试将引导警报放入我的 HTML 代码时，它不会显示。这是我的代码：

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

（我从https://getbootstrap.com/docs/5.0/components/alerts/复制的）

这些是我在 <head> 上的 CSS 和 JS 导入：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

这是我把它放在我的代码中时的样子：

我真的不知道如何解决这个问题，有人可以帮忙吗？

【问题讨论】：

标签： javascript html css bootstrap-5

【解决方案1】：

只需将您在问题中写的任何内容复制到这个基本的 html 布局中，它就可以按预期工作。也许仔细检查一下你是否把东西放在了错误的地方？

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

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

</html>

另外，在我的建议中，在正文结束标记而不是头部标记之前导入脚本。

【讨论】：

我已经解决了这个问题。我将JS code 更改为：gist.github.com/MakufonSkifto/362c3a26470fd8d13a89c8e6eac2d345