Bootstrap 页面右下角吐司

Question

我正在寻找显示堆叠的最有效方法Bootstrap 4 toasts 在页面右下角。

我没能找到任何关于如何在线执行此操作的合适示例。

目前我让它们从右上角堆叠。

<div aria-live="polite" aria-atomic="true" style={{ position: "relative" }}>
        <div style={{ position: "absolute", top: 0, right: 0, zIndex: 9999, float: "right" }}>
            {errors.map(function (error, index) {
                return (
                    <Toast key={index}>
                        <ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
                            Error
                    </ToastHeader>
                        <ToastBody>{error}</ToastBody>
                    </Toast>
                );
            })
        }
        </div>
</div>

任何帮助将不胜感激。

Answer 1

从父 div 中删除 relative，并设置 bottom: 0...

   <div aria-live="polite" aria-atomic="true">
        <div style={{ position: "absolute", bottom: 0, right: 0, zIndex: 9999, float: "right" }}>
            {errors.map(function (error, index) {
                return (
                    <Toast key={index}>
                        <ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
                            Error
                        </ToastHeader>
                        <ToastBody>{error}</ToastBody>
                    </Toast>
                )
            })
        }
        </div>
   </div>

https://codeply.com/p/PRg42pwASa

Bootstrap 页面右下角吐司

Bootstrap Toast at bottom right of page

toast

bootstrap-4

reactstrap