javascript - 如何在 materializecss 中更改 "Toasts"的位置

Question

我已经从 materializecss 实现了“Toast” .我想为“Toast”消息提供一些固定位置。

为了解决问题，我添加了类并更新了位置，但是在不同的屏幕分辨率下，它出现在不同的位置。

Materialize.toast('Success Message', 6000, 'success');

任何人都曾尝试改变“Toast”消息的位置。有没有其他方法可以使其在每个屏幕分辨率下保持一致。

Answer 1

用你需要的覆盖默认的 toast css:

#toast-container {
    display: block;
    position: fixed;
    z-index: 10000
}
@media only screen and (max-width: 600px) {
    #toast-container {
        min-width: 100%;
        bottom: 0%
    }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
    #toast-container {
        left: 5%;
        bottom: 7%;
        max-width: 90%
    }
}
@media only screen and (min-width: 993px) {
    #toast-container {
        top: 10%;
        right: 7%;
        max-width: 86%
    }
}