Bootstrap 4 页面右下角的引导吐司

我正在寻找最有效的方式来显示堆叠引导4祝酒在页面右下角

我还没有找到任何合适的例子来说明如何在网上做到这一点

目前，我有他们堆叠从右上角

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

{errors.map（函数（错误，索引）{
返回(
错误
{错误}
);
})
}

---

任何帮助都将不胜感激。

从父div中删除

relative

，并设置

底部：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>

{errors.map（函数（错误，索引）{
返回(
错误
{错误}
)
})
}

---

将“从上到下”更改为：0，您不需要将其浮动。这有助于我使用Bootstrap 5。