Bootstrap - 多个可关闭的警报答案

【问题标题】：Bootstrap - multiple dismissable alertsBootstrap - 多个可关闭的警报
【发布时间】：2015-09-16 19:04:28
【问题描述】：

只有一个 X 显示在第一个 alert-danger 上；但是警报信息框不显示 X 来关闭 div：

<div class="container">
    <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-           hidden="true">&times;</span></button>
                    <strong><i class="fa fa-exclamation-triangle"></i> Alert:</strong> Placeholder for alert          information, if we ever need to display something crital! <a href="#" class="alert-link">Read more...</a>
                </div>
                <div class="alert alert-info alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-           hidden="true">&times;</span></button>
                    <strong><i class="fa fa-info-circle"></i> Info:</strong> Placeholder for any information alerts   we may want to display. <a href="#" class="alert-link">Read more...</a>
                </div> 
            </div>
        </div>
</div>

【问题讨论】：

你为什么在span标签上使用aria-hidden="true"？把它取下来，它工作正常......

标签： javascript html css twitter-bootstrap

【解决方案1】：

尝试删除<span aria- hidden="true">中多余的空格

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-    navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#">
               HOLA
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-   expanded="false"><i class="fa fa-bell nav-icon"></i> <span class="label label-info">2</span> <span class="caret"></   span></a>
                  <ul class="dropdown-menu">
                      <li><a href="#">Notification 1</a></li>
                      <li><a href="#">Notificatoin 2</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-   expanded="false"><i class="fa fa-user nav-icon"></i> <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li><a href="#">Settings</a></li>
                      <li><a href="#">Logout</a></li>
                  </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right search-form" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-success">Search</button>
            </form>
        </div>
    </div>
</nav>
<nav class="navbar navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href="dashboard.html">Dashboard <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Reporting</a></li>
            <li><a href="#">Billing</a></li>
            <li><a href="#">Catalog</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong><i class="fa fa-exclamation-triangle"></i> Alert:</strong> Placeholder for alert          information, if we ever need to display something crital! <a href="#" class="alert-link">Read more...</a>
                </div>
                <div class="alert alert-info alert-dismissable" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong><i class="fa fa-info-circle"></i> Info:</strong> Placeholder for any information alerts   we may want to display. <a href="#" class="alert-link">Read more...</a>
                </div> 
            </div>
        </div>
</div>

https://jsfiddle.net/itoriginal/mnuuuw13/1/

【讨论】：

【解决方案2】：

您无需删除 aria-hidden，您的 HTML 在aria- hidden="true" 上的这些警报中以及您的移动导航切换bs-example-navbar -collapse-1 中已损坏

$(document).ready(function() {
  /* Handle Fixed Navbar */
  var nav_pos = $(".navbar-inverse").offset();
  $(window).bind('scroll', function() {
    if ($(window).scrollTop() > nav_pos.top) {
      $(".navbar-inverse").addClass("navbar-fixed-top");
    } else {
      $(".navbar-inverse").removeClass("navbar-fixed-top");
    }
  });
  /* End Fixed Navbar */
});

.navbar-default {
  padding: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.page-heading {
  text-align: center;
  font-weight: bold;
}
.nav-icon {
  font-size: 2em;
}
.label {
  position: relative;
  top: -7px;
}
.navbar-nav {
  margin-left: 50px;
}
.search-form {
  margin-top: 13px;
  margin-right: -30px !important;
}
@media (max-width: 1200px) {
  .search-form {
    display: none;
  }
}
.navbar {
  border-radius: 0px;
}
.navbar-default {
  margin-bottom: 0px;
}
.navbar-inverse {
  background-color: #33853E;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 50px;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 10px solid #195721;
}
.navbar-nav > .active > a {
  background-color: #195721 !important;
  text-shadow: 3px 3px 0 #444, 4px 4px 0 #444,
}
.navbar-inverse .navbar-nav > li > a {
  color: #ddd;
}
.alert {
  margin-left: 10px;
  margin-right: 10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="#">
               HOLA
            </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria- expanded="false"><i class="fa fa-bell nav-icon"></i> <span class="label label-info">2</span> <span class="caret"></   span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Notification 1</a>
            </li>
            <li><a href="#">Notificatoin 2</a>
            </li>
          </ul>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria- expanded="false"><i class="fa fa-user nav-icon"></i> <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Settings</a>
            </li>
            <li><a href="#">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-right search-form" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-success">Search</button>
      </form>
    </div>
  </div>
</nav>
<nav class="navbar navbar-inverse">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="active"><a href="dashboard.html">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li><a href="#">Reporting</a>
      </li>
      <li><a href="#">Billing</a>
      </li>
      <li><a href="#">Catalog</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="alert alert-danger alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button> <strong><i class="fa fa-exclamation-triangle"></i> Alert:</strong> Placeholder for alert information, if we ever need to display something crital! <a href="#" class="alert-link">Read more...</a>

      </div>
      <div class="alert alert-info alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button> <strong><i class="fa fa-info-circle"></i> Info:</strong> Placeholder for any information alerts we may want to display. <a href="#" class="alert-link">Read more...</a>

      </div>
    </div>
  </div>
</div>

【讨论】：