爲什麼不顯示bootstrap導航欄移動菜單？

Question

我有兩個問題。第一個也是最重要的是如何使縮小版本中的菜單出現。我想要的第二件事是當我向下滾動並從現在透明的黑色變成黑色時，導航欄保持在頂部。

的代碼是：

<nav class="navbar-inner navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Cosmos</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav pull-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 

和CSS是：

.navbar-inner { 
    background: transparent; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 1; 
} 

你也可以檢查項目的codepen頁： https://codepen.io/georgekech/pen/ZLNMGE

Answer 1

回答這兩個您的問題：

在使用引導程序的響應也已經被處理。如果在HTML上提供了正確的標記，引導程序將負責移動視圖上的菜單。因此，當您調整到移動視圖的大小時，導航欄右側會出現一個「漢堡包菜單」，用於切換菜單選項。

接下來，如果您希望在向下滾動時將標題保留在頂部。 Bootstrap已經提供了它。您只需要用<nav>替換類navbar-inverse與navbar-fixed-top。另外重要的刪除賦予navbar-inner

.navbar-inner { 
    background: transparent; 
    position: absolute; //remove 
    top: 0; //remove 
    right: 0; //remove 
    left: 0; //remove 
    z-index: 1; 
} 

接下來，不必要position: absolute屬性來更改導航欄的背景滾動時你需要添加2種簡單的變化，一到你的JavaScript（使用JQuery）另一個你的CSS，這兩個變化齊頭並進。

JQuery的：

$(function() { 
    $(document).scroll(function() { 
    var $nav = $(".navbar-fixed-top"); 
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 
    }); 
}); 

CSS：

.navbar-fixed-top.scrolled { 
    background: black; 
} 

jQuery的基本上都會添加/刪除（切換）一類的導航欄，當你比滾動導航欄的高度了。當然，CSS只是在從JQuery添加類時添加背景顏色。

Your codepen here

注：

1. 顯然不會忘記，包括jQuery庫爲JavaScript的工作，或者你可以使用普通的JavaScript做同樣的。

2. 如果您還包括JQuery的，因爲你使用的引導v3.3.6，JQuery的版本需要比1.9.1更高，但也低於3，所有這些你可以找到here

完成交易！

Answer 2

.navbar-inner { 
background: transparent; 
position: absolute; 
top: 0; 
right: 0; 
left: 0; 
z-index: 1; 
} 

.navbar-固定的內部位置將使您的菜單穩定，即使您將向下滾動。

要更改滾動的菜單顏色，請檢查此menu background change color on scroll的答案。

Answer 3

您需要在按鈕中使用與data-target相同的名稱作爲菜單div的ID。在這種情況下，「BS-例如，導航欄崩潰-1」 所以加id="bs-example-navbar-collapse-1到div class="collapse navbar-collapse"

對於導航欄，你並不需要，如果你使用的是引導你想要的東西使用CSS。將「navbar-fixed-top」類添加到nav元素。

當您使用此課程時，您需要添加body {padding-bottom: 70px; }。這會將您網頁的內容推到您的導航欄下。 70px適用於您的示例，但在您認爲合適的時候進行更改。

Answer 4

嘗試下面的代碼

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<!-- Bootstrap Navigation Start --> 
 
     <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">Cosmos</a> 
 
      </div> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <div> 
 
       <ul id="menu-hover" class="nav navbar-nav"> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Public Service</a></li> 
 
        <li><a href="#">Idea SubMission</a></li> 
 
        <li><a href="#">Power Division</a></li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> <!-- End Navbar Collapse --> 
 
     </nav> 
 
<!--End Bootstrap Navigation