Bootstrap 警报没有显示关闭按钮答案

【问题标题】：Close button not appearing for Bootstrap alertBootstrap 警报没有显示关闭按钮
【发布时间】：2016-11-14 07:29:19
【问题描述】：

我有以下使用引导程序的 html。它在大多数情况下都有效 - 但 关闭按钮 没有出现在警报中。我在这里缺少的代码是什么？请注意，我是 Bootstrap 的新手 - 所以，这可能很简单。

小提琴：http://jsfiddle.net/LijoCheeran/vxbt960c/

代码

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

<body>

    <h1>Hello, world!</h1>

<div class="alert alert-success">
  <strong>Success!</strong> Bootstrap applied to alert.
</div>


<div style = "padding: 10px 10px 10px;">
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class = "form-control" placeholder = "Amount">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>
</div>

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

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

</body>

</html>

【问题讨论】：

tutorialspoint.com/bootstrap/bootstrap_alerts.htm 看来您必须手动添加它。

标签： twitter-bootstrap

【解决方案1】：

您的代码中缺少这一行。

   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

例如：

    <div class="alert alert-success">
    <!-- you missed this line of code -->
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Success!</strong> Bootstrap applied to alert.
    </div>

祝你好运

【讨论】：

【解决方案2】：

您需要自己提供关闭按钮。如the examples，使用类似：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

【讨论】：