为什么不显示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