Materialize에서 "Toast"의 위치를 ​​변경하는 방법

Question

materializecss에서 "토스트"을 구현했습니다. 그리고 "토스트"메시지를 수정하려고합니다.

해결 방법은 클래스 및 업데이트 된 위치를 추가했지만 다른 화면 해상도를 사용하면 다른 위치가 나타납니다.

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

"토스트"메시지의 위치를 ​​변경하려고 시도한 사람이 있습니다. 모든 화면 해상도에서 일관성을 유지할 수있는 다른 방법이 있습니까? 당신이 필요로

Answer 1

재정의 기본 토스트 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% 
    } 
}