如何在右上角显示 bootstrap 4.2 Toast？

Question

我正在尝试使用Bootstrap 4.2 Toast。我希望 Toast 显示在我网站右侧部分的右上角。

我尝试了以下标记，如文档中的 boostrap 示例所示，但我无法显示它。

<!-- Toasts -->
<div aria-live="polite" aria-atomic="true" style="position: relative;">

    <!-- Position it -->
    <div style="position: absolute; top: 3rem; right: 0;">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="mr-auto">Toast Title</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Some Toast Body      
            </div>
       </div>

    </div>
</div>

这是带有我完整标记的fiddler，但似乎无法显示祝酒词。

我怎样才能显示祝酒词

Answer 1

这个answer 在右上角显示一个Toast。您创建的原始小提琴（在您编辑问题之前）不包括 Bootstrap JS。

来自Bootstrap docs...

“出于性能原因，Toast 是可选的，因此您必须初始化 他们自己。”

所以你需要像...一样初始化它们

$('.toast').toast('show');

此外，当您在 relative 位置元素中包含 absolute 位置元素时（就像在您的小提琴中一样），绝对元素相对于父元素，因此在另一个元素之下页面上的内容。移除相对父级，使 Toast 相对于整个页面成为绝对值。

演示：https://codeply.com/go/AVBr2zUcue