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不加載，始終可見

回答

相關問題