javascript - 无法让 Bootstrap toast 关闭或自动隐藏工作

Question

我正在尝试使用以下代码在我的 ASP.NET web 应用程序中实现 Bootstrap 5 toasts...

HTML

                    <div class="row">
                        <div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <strong class="me-auto">Bootstrap</strong>
                                <small>11 mins ago</small>
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                            </div>
                            <div class="toast-body">
                                Hello, world! This is a toast message.
                            </div>
                        </div>
                    </div>

JavaScript

$('#companyUpdOK').toast();  // code to set up toast
...
$('#companyUpdOK').show();   // and later, the code to display the toast

所以，toast 出现了，但是自动隐藏不起作用，关闭按钮也不起作用。我已经尝试了所有我能找到的组合，包括在初始化 toast 时设置选项，如下所示:

$('#companyUpdOK').toast({delay: 5000, autohide: true});

这些都不起作用。我做错了什么？

Answer 1

如果你使用的是 bootstrap 5 那么你应该使用 data-bs-autohide="true" 和 data-bs-delay="10000" 你错过了 bs