Question

我正在尝试在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项目上测试过这个问题。如何正确显示警报？

Answer 1

我认为这是一个资源加载订单的事情（请参阅此answer）。尝试按此顺序添加资源：jQuery then 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>

Answer 2

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

Bootstrap css
Jquery
Bootstrap js

请记住在使用bootstrap之前使用jquery，否则会出错。试试下面的代码片段。

＆＃13;

<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>

＆＃13;

为什么Bootstrap警报不可见？

2 个答案: