首页 > BootStarp响应式的导航栏button无响应

BootStarp响应式的导航栏button无响应

新手练习bootstarp的响应式导航栏,在小于一定宽度的时候确实响应

但是点击button却没有出现这个效果

以下为源代码,希望各位可以指出我哪里设置的不对

 <header role="banner">
            <nav role="navigation" class="navbar navbar-default">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="index.html">一起看电影</a>
                </div>
                <div class="navbar-collapse collapse ">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">首页</a></li>
                    <li><a href="zixunyugao.html">资讯预告</a></li>
                    <li><a href="wangqihuigu.html">往期回顾</a></li>
                    <li><a href="ziyuanxiazai.html">资源下载</a></li>
                  </ul>
                </div><!--/.nav-collapse -->
              </div><!--/.container -->
            </nav>
        </header>
        

补充:1.F12看Network,bootstarp.min.css,jquery.min.js,bootstarp.min.js都有正确加载。
2.单独引入collapse.js也没有效果。
3.JS Bin:http://jsbin.com/zegibucona/edit?html


在footer中引入js文件使用了错误的方式,应该是:

<script src="C:\Users\DrLouie\Desktop\weixin\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>

而不是

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">

建议代码贴到 JS Bin 上,方便别人帮你找问题。

希望有所帮助~ :)

【热门文章】
【热门文章】