我想利用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">×</span>
</button>
</div>
<div class="toast-body">
Some Toast Body
</div>
</div>
</div>
</div>
这里是我的完整的标记一个fiddler,但似乎无法露面祝酒词。
我怎样才能显示祝酒词
这answer显示在右上角敬酒。你创建(编辑你的问题之前)原小提琴不包括引导JS。
从Bootstrap docs ...
“祝酒词都选择在性能方面的原因,所以你必须自己初始化它们。”
所以,你需要初始化它们像...
$('.toast').toast('show');
此外,当你有一个相对位置元素内的绝对位置元素(如你的小提琴)的绝对要素是相对父,因此下面的页面上的其他内容。删除相对父作相对于整个页面的绝对吐司。
但是:四联zxsw POI