响应式引导导航栏不起作用答案

【问题标题】：Responsive bootstrap navbar not working响应式引导导航栏不起作用
【发布时间】：2015-06-09 23:05:25
【问题描述】：

我一直在为网站制作导航栏，我已经正确调整了它的大小，但是当它变成响应栏（将链接折叠到下拉列表中）时，我无法显示可折叠菜单。带有 3 个条的列表按钮和我隐藏的导航栏品牌出现，但我无法让菜单下拉。有任何想法吗？

代码：

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

【问题讨论】：

确保在你的标记中调用 jquery.js 在 bootstrap.js 之前。

标签： html css twitter-bootstrap

【解决方案1】：

您是否也在加载 bootstrap.js 或 collapse.js + transitions.js？没有它们，导航崩溃将无法工作，如文档中所述：http://getbootstrap.com/components/#requires-javascript-plugin

【讨论】：

谢谢各位，ID帮了忙，结果发现collapse js链接有错字，看了这么久都没想到要检查我的拼写！再次感谢大家，巨大的帮助！

【解决方案2】：

我可以对您的代码进行一些更改以修复问题

<div class="container">
<div class="navbar-default navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
  </div>

这里有一个 jsbin 链接：http://jsbin.com/disasusuri/2/ ps : 我用的是最新版本的 bootstrap

【讨论】：

【解决方案3】：

data-target 应该指向id 而不是class，所以不要使用data-target=".navbar-collapse"，而是使用data-target="#someID"，然后将id 添加到将要折叠的div，<div class="navbar-collapse collapse" id="someID">

working bootply link

<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#someID">
            <span class="sr-only">Toggle Navigation</span>
            <span class="fa fa-bars"></span>
        </button>
        <a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> &nbsp; Brand &nbsp; <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse" id="someID">
    <ul class="nav nav-justified">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div></div>

【讨论】：