Как показать бутстрап 4.2 Тост в верхнем правом углу скрыть?

Question

Я пытаюсь использовать Bootstrap 4.2 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>

Вот скрипач с моей полной разметкой, но, кажется, не могу показать тосты.

Как мне показать тосты

Answer 1

Этот ответ показывает тост в правом верхнем углу.Оригинальная скрипка, которую вы создали (до того, как отредактировали вопрос), не включает Bootstrap JS.

Из Документов Bootstrap ...

"Тостысогласитесь по соображениям производительности, поэтому вы должны инициализировать их самостоятельно . "

Так что вам нужно инициализировать их как ...

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

Такжекогда вы включаете элемент позиции absolute в элемент позиции относительный (как в вашей скрипке), абсолютный элемент относительно родительского и, следовательно, ниже другого содержимого на странице.Удалите относительного родителя, чтобы сделать абсолютный тост относительно всей страницы.

Демонстрация: https://www.codeply.com/go/AVBr2zUcue