为什么 Bootstrap 警报不可见？答案

【问题标题】：Why is Bootstrap alert invisible?为什么 Bootstrap 警报不可见？
【发布时间】：2018-09-26 16:47:37
【问题描述】：

我正在尝试在我的 Asp.Net Mvc 应用程序中创建警报。我正在使用这个 html，基本上直接取自 Bootstrap 网站：

<div id="notifications" style="z-index: 1" padding="10">
    <div class="alert alert-success alert-dismissible fade show" id="alert1" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
    This is an Alert.
    </div>
</div>

问题是当我加载页面时，警报占用了页面上的适当空间，但不可见。我可以通过将鼠标缓慢扫过该区域来找到关闭按钮，然后单击它确实会关闭警报，但在任何时候都看不到任何东西。我以为z-index: 1 可能已经修复了它，但没有这样的运气。

我也在一个新的 Asp.Net 项目上测试过这个问题。如何让警报正确显示？

【问题讨论】：

对我来说很好：jsfiddle.net/zephyr_hex/61jx3dn1 一定有其他东西干扰了您的页面。您需要编辑您的问题并提供该问题的工作示例。否则，我们无法回答您的问题。
请提供一个我们有你的html、css和js的样本，以便重现错误
当您包含 Bootstrap 的 CSS 时，您提供的 HTML 功能符合预期。您在项目中还包括哪些其他 CSS？你有没有针对.alert的JavaScript？
您是否为引导程序添加了适当的 CDN？
它实际上是一个新的 Asp.Net Mvc 应用程序（从 VS 2017 模板创建），在正文中添加了上述代码

标签： html asp.net-mvc twitter-bootstrap

【解决方案1】：

我认为这是一个资源加载顺序的事情（见answer）。尝试按以下顺序添加资源：jQuery 然后 Bootstrap。

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id="notifications" style="z-index: 1" padding="10">
    <div class="alert alert-success alert-dismissible fade show" id="alert1" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
    This is an Alert.
    </div>
</div>

【讨论】：

修复了它。我有资源，但版本太旧了。

【解决方案2】：

您的 html 源代码没有任何问题。检查您是否正确引用了所有依赖项。为了添加正常运行的警报，您需要拥有

引导 css
jQuery
引导 js

在使用bootstrap之前记得使用jquery，否则会报错。试试下面的 sn-p。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="notifications" style="z-index: 1" padding="10">
  <div class="alert alert-success alert-dismissible fade show" id="alert1" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button> This is an Alert.
  </div>
</div>

【讨论】：

这与我的回答有何不同？