实现css - 改变吐司对话框的位置

Question

我正在使用Materialise css(www.materializecss.com).想要改变吐司对话的位置.在较小的屏幕中,它处于适当的位置.对于宽屏幕和盒子布局,它会从我的布局中转到右上角.(http://materializecss.com/dialogs.html)

当吐司被触发时,它会<div id="toast-container"></div>在身体中附加" ".我不想把它贴在身上.我希望它在特定的div中.

Answer 1

吐司对话框的位置可以通过设置的dafault值被改变#toast-container到auto与!important.

例如,如果您希望桌面屏幕上的默认位置相反,请将其更改为:

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;  
}

• 使用!importantis 是必要的,否则materialize.css将覆盖它
• 使用position:absolute;或者position:fixed;是没有必要的

版本0.97.6的演示

Materialize.toast('I am a toast!', 4000);

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>