web-dev-qa-db-fra.com

Comment montrer bootstrap 4.2 toast sur le côté supérieur droit?

J'essaie d'utiliser Bootstrap 4.2 toast . Je veux que les toasts apparaissent sur le haut à droite sur les bonnes sections de mon site.

J'ai essayé le balisage suivant comme indiqué dans son exemple de boostrap sur la documentation, mais je ne peux pas l'amener à apparaître.

<!-- 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>

Voici un Fiddler avec mon balisage complet, mais ne semble pas sembler montrer les toasts.

Comment puis-je montrer les toasts

csstwitter-bootstrapbootstrap-4bootstrap-toast
5
Junior

Ceci Réponse montre un toast en haut à droite. Le violon original que vous avez créé (avant de modifier la question) n'inclut pas Bootstrap JS.

Du Bootstrap Docs ...

"Les toasts sont opt-in pour des raisons de performance, de sorte que vous doit les initialiser vous-même ."

Donc, vous avez besoin de les initier comme ...

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

En outre, lorsque vous incluez un absolu élément de position à l'intérieur d'un relative élément de position (comme dans votre violon) L'élément absolu est relatif à le parent et donc sous l'autre contenu de la page. Retirez le parent relatif pour rendre le toast absolu par rapport à la page entière.

Démo: https://www.codeply.com/go/avbr2zucue

3
Zim