如何在右上角显示引导程序 4.2 Toast？

Question

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

我尝试了以下标记，因为它在文档的 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>

这是一个带有我完整标记的小提琴手，但似乎无法显示祝酒词。

我怎样才能显示吐司

Answer 1

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

从Bootstrap 文档...

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

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

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

此外，当您在相对位置元素（如您的小提琴）中包含绝对位置元素时，绝对元素是相对于父元素的，因此位于页面上的其他内容下方。删除相对父级以使绝对 Toast 相对于整个页面。

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