Bootstrap 3, navbar-toggler-icon Not Loading, Always Visible

问题

When using the following navbar code, I'm having two issues: 1. The actual navbar-toggler-icon isn't loading, I'm only seeing a small white square. 2. The icon is always visible, even when the navbar menu is full-width. Any advice would be greatly appreciated! I've been banging my head against a wall!

<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>

I'm using Bootstrap 3.3.7, as I've run into a lot of navbar trouble with Bootstrap 4

================================================================== SOLUTION: Sometime between Bootstrap 3.3.7 and the new beta Bootstrap 4, they renamed 'navbar-toggle' to 'navbar-toggler'! The navbar-toggler-icon is also new, and was replaed with three icon-bars, like the example shown 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>

回答1:

Here is a demo of what I did. It's possible a jquery file was missing because bootstrap's collapse navbar depends on it to animate. I couldn't get navbar-toggle-icon to work, but I could get the bars using this:

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

I included this link to the jquery library so bootstrap could depend on it:

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

In total, here is the code:

<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>

来源：https://stackoverflow.com/questions/46577875/bootstrap-3-navbar-toggler-icon-not-loading-always-visible

标签

html

twitter-bootstrap-3