Bootstrap 导航栏折叠图标不显示也不工作

Question

我正在尝试在我的一个小项目上实现可折叠的导航栏。我的问题是当我调整 window 大小时，导航栏折叠但按钮（即使它是可点击的）没有出现，也没有提供任何选项。

不知道是不是jQuery/JS的问题。我只是一个初学者，所以我只是 link 在 codepen 设置上编辑了一些库。我查看了人们对此提出的一些问题，但 none 的解决方案对我有所帮助。

codepen link 是：https://codepen.io/diegomengue/pen/XgRamN.

感谢任何有关该主题的帮助（以及各种提示）！

谢谢。

HTML:

<nav class='navbar navbar-toggleable-sm mx-auto sticky-top'>
  <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class='navbar-nav mx-auto'>
     <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
     <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
     <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
    </ul>
   </div>
  </nav>

Answer 1

Navbar 切换器 class 需要 navbar-color-scheme 类型 class 。试试这支笔

<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarNav">
    <ul class='navbar-nav mx-auto'>
      <li class='nav-item'><a href='#sobreMim' class='nav-link'><strong>Diego Mengue</strong></a></li>
      <li class='nav-item'><a href='#portfolio' class='nav-link'>Portfólio</a></li>
      <li class='nav-item'><a href='#contato' class='nav-link'>Contato</a></li>
    </ul>
    </div>
  </nav>

https://codepen.io/dannybrown/pen/yXXBxK?editors=1100

如果您不想遵循可用的配色方案，请在您的自定义样式中添加 navbar-toggler class 的样式

Bootstrap 导航栏折叠图标不显示也不工作

Bootstrap navbar collapse icon not appearing nor working

html

css

twitter-bootstrap

twitter-bootstrap-4