Bootstrap Toast 保留在顶部（不可见）

Question

甲引导吐司未关闭（使用的关闭按钮）之前的应用程序是“成品”（重新加载或在浏览器出口）。当应用程序再次启动时，“隐形吐司”下的按钮虽然可见但无法使用。所以看起来吐司“保持在顶部”但不可见。

问题的解决方法是点击显示toast的按钮并关闭toast。现在所有按钮都是可点击的。

引导程序 4.3.1。包裹被使用。有人可以解释一下吗？

Answer 1

在您的工作演示中，我能够通过以下两种方式隐藏页面加载时的吐司来解决此问题（选择一种）

1)hide()在页面就绪时调用 jQuery ：

$(document).ready(function(){
    // Hide the Toast
    $("#myToast").hide();

    $(".show-toast").click(function(){
        $("#myToast").toast('show');
    });
    $(".hide-toast").click(function(){
        $("#myToast").toast('hide');
    });
    $(".dispose-toast").click(function(){
        $("#myToast").toast('dispose');
    });
});

2）将hide类添加到吐司：

<div class="toast hide" id="myToast" data-autohide="false" style="position: absolute; top: 0; right: 0;">

选项 2 更干净。但我知道hide该类在引导程序中已被弃用，因此请自行承担 [未来] 风险。不过，它确实适用于您的 4.3.1 版本，所以...