logo标签列表

Bootstrap警告框的关闭按钮未出现。

twitter-bootstrap
9
我有以下使用Bootstrap的HTML，大部分正常工作——但是关闭按钮在警告框中没有出现。这里我缺少了什么代码？请注意，我是Bootstrap的新手，所以可能是一些简单的东西。 Fiddle: 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>
似乎你需要手动添加它。请参考：https://www.tutorialspoint.com/bootstrap/bootstrap_alerts.htm - sinisake
3个回答
10
你的代码缺少这行代码。
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

eg: 

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

祝你好运

3
您需要自己提供关闭按钮。可以像示例中那样使用以下代码：
<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>
0

更新：2023 Bootstrap 5，您只需包含_close.scss文件，Bootstrap X将显示为SVG。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接