html - 导航栏折叠按钮不显示内容

Question

我的 navbar 按钮不起作用，我正在使用 CodePen 处理这个元素，所以 Bootstrap 已经配置到代码中。

  <div class="navbar-header">
    <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a  href="#" class="navbar-brand"> Nasr Almansoob </a>
  </div>


  <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"> <a href="#"> Home </a></li>     
        <li><a href="#"> About Me </a></li>
        <li> <a href="#"> Aspirations </a> </li>   
      </ul>
</div>

Answer 1

链接事物的顺序会有所不同。在这种情况下，您应该先添加 jquery 链接，然后再添加 bootstrap.js 链接。这为我修好了in this Codepen .