Bootstrap 引导警报未显示关闭按钮

tkclm6bt 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(3)|浏览(142)

我有以下使用 Bootstrap 的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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/40579865/close-button-not-appearing-for-bootstrap-alert

3条答案

按热度按时间

7rtdyuoh1#

您的代码中缺少此行。

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

祝你好运

赞(0）回复(0）举报 2023-03-06

vs91vp4v2#

您需要自己提供关闭按钮。如示例所示，请使用以下内容：

<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）回复(0）举报 2023-03-06

piok6c0g3#

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

赞(0）回复(0）举报 2023-03-06