我正在使用 Bootstrap 制作 Rails 应用程序。不幸的是，我无法将整个 bootstrap.CSS 文件添加到我的网络应用程序中，因为 CSS 会相互覆盖。作为替代解决方案，我只是从 bootstrap 中取出某些 CSS 来做一些事情。其中之一是闪光灯。我想在发送电子邮件时成功显示 flash。现在我有两个问题。
- Flash 框显示在导航栏所在的上方。它不会在屏幕顶部显示为一个框。看下图。
我想要的是:
- 我在 CSS 中加入了
淡入淡出，但它从未被触发。
下面是我的代码:
//in my MailerController.rb
flash[:success] = "Thank you for your message! We will get back to you shortly."
//application.html.erb
<body>
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type} fade in") %>
<% end %>
</body>
我从 Bootstrap 中取出的 CSS:
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
谁能告诉我我遇到了什么问题？
最佳答案
您需要包含 Bootstrap-JS 才能实现该功能。
要按照您的需要(例如，从文档流到屏幕上任何您想要的位置)以特定尺寸定位您的消息，您需要一个包装器。
此 Wrapper 是一个 DIV，具有您想要的尺寸(如宽度)并且 position 属性设置为 absolute 或 fixed。
一些 HTML
<body>
<div id="flash-message-wrapper">
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type} fade in") %>
<% end %>
</div>
<!-- more content -->
</body>
一些 CSS
#flash-message-wrapper {
position: fixed;
top: 40px; right: 100px;
width: 500px;
}
fiddle 示例:https://jsfiddle.net/c4q8nn6w/1/
使用fade in initial 不会呈现淡入淡出效果。只需使用 fade 并为每个 JS 添加 in(例如在加载或回调时)。我用超时给大家看看实际效果。
关于html - Rails bootstrap flash 不褪色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37691880/