Question

使用以下导航栏代码时，我遇到两个问题： 1.实际的navbar-toggler-icon没有加载，我只看到一个小的白色方块。 2.即使导航栏菜单为全宽，图标也始终可见。任何建议将不胜感激！我一直在撞墙撞墙！

<nav class="navbar navbar-toggleable-md navbar-inverse">
  <div class="navbar-header">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#header-menu" aria-controls="header-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <a class="navbar-brand" href="#">Kaitlyn Dornbier</a>
  <div class="collapse navbar-collapse" id="header-menu">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">About</a></li>
      <li><a href="#">Resume</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

我正在使用Bootstrap 3.3.7，因为我在Bootstrap 4中遇到了很多导航问题

=============================================== =================== 解：在Bootstrap 3.3.7和新的beta Bootstrap 4之间的某个时间，他们重新命名了“导航栏切换”＃39;到＆＃39; navbar-toggler＆＃39;！ navbar-toggler-icon也是新的，并被重新设置了三个图标栏，如显示的示例here

<nav class="navbar navbar-inverse">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navbar-toggle-right" data-toggle="collapse" data-target="#header-menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">Kaitlyn Dornbier</a>
        </div>
        <div class="collapse navbar-collapse" id="header-menu">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Resume</a></li> 
            <li><a href="#">Skills</a></li> 
            <li><a href="#">Contact</a></li> 
          </ul>
        </div>

    </nav>

Answer 1

这是我所做的demo。可能缺少jquery文件，因为bootstrap的折叠导航栏依赖于它来制作动画。我无法使用navbar-toggle-icon工作，但我可以使用它来获取条形码：

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

我将此链接包含在jquery库中，因此bootstrap可能依赖于它：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

总的来说，这是代码：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Kaitlyn Dornbier</a>
    </div>
    <div class="collapse navbar-collapse" id="header-menu">
      <ul class="nav navbar-nav navbar-right">

      <li><a href="#">About</a></li>
      <li><a href="#">Resume</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap 3，navbar-toggler-icon无法加载，始终可见

1 个答案: