Question

<div class="alert alert-info alert-dismissible fade show">
  <button class="close" data-dismiss="alert" aria-label="Close">x</button>
  Signed out successfully.
</div>

我无法通过上面的html关闭我的Bootstrap警报。根据bootstrap文档，一切看起来都是正确的。我正在使用rails应用程序。

你能看出我做错了什么吗？如果HTML没有任何问题，您能否提出任何想法。我正在使用Rails 5和Turbolinks 4.我可以告诉你，bootstrap JS和CSS都正确加载。

Answer 1

我发现HTML mark-up没有错。

所以，它让我有一个想法，我认为你对fade show事件做错了。看看你是否正在对那些进入警报关闭事件路径的事件做些什么。

发布您的javascript，然后这个唯一的答案即可完成。

Answer 2

您必须将fade和in类添加到警报中。

要让您的提醒在关闭时使用动画，请确保它们具有 .fade和.in类已经应用于它们。

请参阅文档中的Alert.js Usage。

这是正在应用的CSS：

.fade.in {
  opacity: 1
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear
}

工作示例：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="alert alert-info alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  Signed out successfully
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap警报数据关闭无效

2 个答案: