如何改变＆＃34; Toast＆＃34;在materializecss中

Question

我已实施＆＃34; Toast ＆＃34;来自materializecss。我想给＆＃34; Toast ＆＃34;消息。

为了解决方法，我添加了课程和更新的位置，但屏幕分辨率不同，它会出现不同的位置。

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

任何人都试图改变＆＃34; Toast＆＃34;信息。 是否还有其他方法可以在每个屏幕分辨率中使其保持一致。

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