2014-11-02 179 views
4

我是新手Bootstrap,只是试图让折叠下拉导航栏的行为。它完美调整大小,直到窗口非常小,触发所有导航栏项目被移除并放置在小数据切换按钮内。因为当我点击该lil的数据切换按钮时,它不会展开并显示下拉列表中的项目。Bootstrap崩溃导航栏不扩展

<nav class="navbar navbar-default" role="navigation"> 

      <div class="container-fluid"> 
       <div class="navbar-header logo"> 
        <a class="navbar-brand" href="index.html"><img src="images/nastilogowhite.png" class="img-responsive" style="margin: 0 auto;"></a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 

       </div> 

       <div class="collapse navbar-collapse" id="nav-collapse"> 
         <!-- Individual Navbar elements --> 
        <ul class="nav nav-justified nasti-nav"> 
         <li class="active"><a href="index.html">Home</a></li> 
         <li class="divider"></li> 
         <li><a href="familylaw.html">Family Law</a></li> 
         <li class="divider"></li> 
         <li><a href="criminallaw.html">Criminal Law</a></li> 
         <li class="divider"></li> 
         <li><a href="conveyancing.html">Conveyancing</a></li> 
         <li class="divider"></li> 
         <li><a href="about.html">About</a></li> 
         <li class="divider"></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </div> 
      </div> <!-- Container fluid--> 

     </nav> 

我用过的所有网页上此相同的代码,但由于某种原因,它仅适用本网站的主页上。主页和其他页面之间的唯一区别在于<nav>标签下方有另一个内容div,其中包含该页面的主要文本&图像。这就是说,当我从我的页面上删除这个div的整个代码时,问题依然存在,所以我不认为它是这样的。我可能也会(使用冗余类),但那是一个故事以后...

回答

5

我使用相同的代码,它是可以正常使用,请检查http://jsbin.com/henume/2/edit?html,output

你提到的它会调整得当,所以我假定bootstrap.css工作。请确保页面中包含jQuery.js和boostrap.js。

+0

谢谢!有趣....我实际上看到了关于jQuery的其他答案,但是假设是因为我确实在html中有一个jQuery,这不是问题。但显然我使用的鲍尔模板以这种方式链接它,不保证它加载.. 鲍尔模板把jQuery放在身体的底部,然后引导js的东西仍然。那么关于这个顺序的一些事情意味着jQuery不能及时加载?当我按照你的jsbin并把头部包含在内,那么它的作品完美。 – kaifresh 2014-11-02 23:48:35

6

大多数时候,它的原因是jQuery没有正确链接到页面。或者在jQuery.js之前引用bootstrap.js。确保你有正确的链接。

0

正如nasirkhan所提到的,代码在活动域上完美运行。有时候,这个问题可能是由本地域名引起的,就像我的情况一样,并且相同的代码在活动网站上呈现良好。

0

我有同样的问题,请确认您包含这两个文件。 第一个是Bootstrap(CSS),第二个是Bootstrap(javascript)。 在我的情况下正确地包括了CSS,但你知道我在包括第二个包括的时候做了什么,但是它是一个脚本。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
0

这三条线的添加帮助了我。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">