Bootstrap 3，navbar-toggler-icon未加载，始终可见 [英] Bootstrap 3, navbar-toggler-icon Not Loading, Always Visible

问题描述

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

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>

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

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

===================================================================解决方案:在Bootstrap 3.3.7和新的Beta Bootstrap 4之间的某个时候，他们将"navbar-toggle"重命名为"navbar-toggler"！navbar-toggler-icon也是新的，并替换为三个图标栏，例如所示的示例这里

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

推荐答案

这是演示可能会丢失一个jquery文件，因为bootstrap的折叠导航栏依赖于它进行动画处理.我无法使navbar-toggle-icon正常工作，但是我可以使用以下方法获得酒吧:

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> 

我包括了指向jquery库的链接，因此引导程序可以依赖于它:

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

总共是以下代码:

<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未加载，始终可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！