引导导航栏不显示列表项答案

【问题标题】：Bootstrap Navbar Not Displaying the list items引导导航栏不显示列表项
【发布时间】：2017-06-13 17:03:10
【问题描述】：

引导导航栏不显示列表项，切换按钮不工作。

 <nav class="navbar navbar navbar-default fixed-top navbar-light bg-faded ">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#"><img src="https://image.ibb.co/fF1j0v/anchor.png" width="30" height="30" class="d-inline-block align-top" alt=""> ShivaWorks</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

我错过了什么吗？请帮忙。

【问题讨论】：

提供jsfiddle。
codepen.io/monsieurshiva/pen/YQWxqw
这是因为你没有包含 Javascript 文件。
就是这样。谢谢

标签： html twitter-bootstrap navbar

【解决方案1】：

您的代码中没有使用bootstrap.js 和jquery.js。

在代码末尾</html>之前使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

【讨论】：