引导按钮打不开

Question

我无法弄清楚为什么我的 boostrap 按钮无法打开。

我已经看到以前的问题与 Jquery 顺序有关，但我认为这不是我的问题。对吧？

我正在关注 bootstrap 官方网站上的示例。

有人可以帮帮我吗？

我的代码

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- JQuery Library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Bootstrap Propper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>



<div class="container-fluid">
  <hr id="hr-nav">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
    <a class="navbar-brand" href="#">T!</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    <div class="collapse navbar-collapse" id="#main-navbar">
      <ul class="navbar-nav navbar-center">
        <li class="nav-item active"><a class="nav-link" href="#">TEST1<span class="sr-only">(current)</span></a></li>
        <li><a class="nav-link" href="#">TEST2</a></li>
        <li><a class="nav-link" href="#">TEST3</a></li>
      </ul>
    </div>
  </nav>
  <hr id="hr-nav">
</div>

Answer 1

在分配 id 时不要使用 (#)。 这就是问题所在。

从

中删除#

<div class="collapse navbar-collapse" id="#main-navbar">

一切都会开始工作。

---

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="container-fluid">
  <hr id="hr-nav">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
    <a class="navbar-brand" href="#">T!</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="navbar-nav mr-auto navbar-center">
        <li class="nav-item active"><a class="nav-link" href="#">TEST1<span class="sr-only">(current)</span></a></li>
        <li><a class="nav-link" href="#">TEST2</a></li>
        <li><a class="nav-link" href="#">TEST3</a></li>
      </ul>
    </div>
  </nav>
  <hr id="hr-nav">
</div>