Question

我使用Bootstrap 4文档中的代码制作了自己的导航栏。 Bootstrap导航栏设法折叠得很好但是当我点击按钮时它只是不会扩展。我在这支笔中加入了jQuery，JavaScript和Bootstrap 4 JavaScript，但它不起作用。代码有什么问题吗？

这是我的代码：https://codepen.io/lamtu/pen/LdRLWv

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Lam Tu</a>

  <button class="navbar-toggler" 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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">    
      <li class = "nav-item"><a class = "nav-link" href="#about-me">About me</a></li>
      <li class = "nav-item"><a class = "nav-link" href="#porfolio">Porfolio</a></li>
      <li class = "nav-item"><a class = "nav-link" href="#contact">Contact</a></li>
      <li class = "nav-item"><a class = "nav-link" href="#social">Social</a></li>
    </ul>
  </div>

</nav>

Answer 1

您未使用popper.js的正确版本：

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Navbar工作：https://www.codeply.com/go/nU7rkG4Lu0

Answer 2

在https://freecodecamp.org上进行投资组合项目时，我遇到了与此类似的问题，但已解决。这是我的代码的样子；

    <div class= "w-100>
    <nav class= "navbar nav-fill navbar-expand- 
    lg navbar-dark bg-dark fixed-top">

w-100表示宽度为100％。但是，如果这还不够的话，请查看我的整个代码，尤其是按钮后面的部分；

    <div class="justify-content-end collapse navbar-collapse" 
    id="navbarSupportedContent">
    <ul class="navbar-nav">
    <li class="nav-item">

这是我的链接，以防万一您需要进一步的帮助或看到喜欢的东西；

https://codepen.io/stealthman22/full/PeZvNK/

欢呼和快乐的编码！

Bootstrap Navbar不会扩展

2 个答案: