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

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

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

我使用的是引导3.3.7，因为我已经有4引导

碰到很多麻烦导航栏中的================ ================================================== SOLUTION： Bootstrap 3.3.7和新的Bootstrap 4之间有一段时间，他们将'navbar-toggle'重命名为'navbar-toggler'！该导航栏，toggler图标也是新的，并有三个图标酒吧被replaed，像所示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>

来源

2017-10-05 Kaitlyn Dornbier

我的回答对你有帮助吗？ –

嗯，三个图标栏跨越帮助！至于不断可见的按钮，我最终通过使用w3schools.com/bootstrap/bootstrap_navbar.asp将其报废并返回到裸露骨骼寻找帮助，结果代替'navbar-toggler'，它应该是'navbar-toggle ' - 不知道为什么他们会改变它，但这是做的伎俩！ –

我现在看到你的代码中也有导航栏切换，硬变量名称更改为捕捉！ –

这里的例子是什么，我做了demo。这可能是一个jquery文件丢失，因为bootstrap的崩溃导航栏取决于它进行动画。我不能让导航栏，切换图标的工作，但我可以用得到吧这样的：

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

我包括在此链接到jQuery库，以便引导可以依靠它：

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>

来源

2017-10-05 05:01:49

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

回答

相关问题