如何显示在右上方隐藏引导4.2吐司?

问题描述 投票:1回答:1

我想利用Bootstrap 4.2 Toast。我想祝酒词要在我的网站右侧部分的上部右侧显示出来。

我想下面的标记,因为它显示在文档上的自举的例子,但我不能把它展现出来。

<!-- 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,但似乎无法露面祝酒词。

我怎样才能显示祝酒词

css twitter-bootstrap bootstrap-4 bootstrap-toast
1个回答
2
投票

answer显示在右上角敬酒。你创建(编辑你的问题之前)原小提琴不包括引导JS。

Bootstrap docs ...

“祝酒词都选择在性能方面的原因,所以你必须自己初始化它们。”

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

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

此外,当你有一个相对位置元素内的绝对位置元素(如你的小提琴)的绝对要素是相对父,因此下面的页面上的其他内容。删除相对父作相对于整个页面的绝对吐司。

但是:四联zxsw POI

© www.soinside.com 2019 - 2024. All rights reserved.