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>

这是一个带有完整标记的fiddler，但似乎看不到吐司。

我如何展示烤面包

Answer 1

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

从Bootstrap docs ...

“出于性能考虑，选择加入多士，所以您必须初始化他们自己。”

所以您需要像...那样初始化它们

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

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

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

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

1 个答案: