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