Bootstrap navbar mobile-toggle不起作用 [英] Bootstrap navbar mobile-toggle isn't working

问题描述

当我收缩浏览器时，移动切换是可见的，但是当我点击它时，它不会扩展。

 < nav class =navbar-default navbar-fixed-top我无法弄清楚为什么会发生这种情况。角色= 导航 > 
< div id =navbar> 
< div class =container-fluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-menubuilder>< span class =sr-only> Toggle navigation< / span>< span class =icon-bar>< / span>< span class =icon-bar>< / span>< span class = >< /跨度>< /按钮> 
< / div> 
< div class =collapse navbar-collapse navbar-menubuilder> 
< ul class =nav navbar-right nav-pills> 
< li class =dropdown>< a data-toggle =dropdownclass =dropdown-togglehref =＃portfolio> 1< b class =caret> < / b>< / A> 
< ul class =dropdown-menuid =prtf> 
< li>< a href =＃> 1.1< / a>< / li> 
< li>< a href =＃> 1.2< / a>< / li> 
< li>< a href =＃> 1.3< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃> 2< / a>< / li> 
< li>< a href =＃> 3< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / nav> 
 
 <！ -  jQuery  - > 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js>< / script> 
 
 <！ -  bootstrap  - > 
< script src =bootstrap3 / js / bootstrap.min.js>< / script> 
  

解决方案

我复制粘贴你的导航栏部分到jsfiddle，它似乎按照它应该的工作。我认为这可能是你的js文件路径不正确。

jsFiddle： https://jsfiddle.net/AndrewL32/LrLffj2m/1/

请替换此行：

< script src =bootstrap3 / js / bootstrap.min.js>< / script>

有了这个：

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

When I shrink the browser the mobile-toggle is visible, but when I click on it, it doesn't expand. I can't figure out why this is happening.

<nav class="navbar-default navbar-fixed-top" role="navigation">
    <div id="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 navbar-menubuilder">
                <ul class="nav navbar-right nav-pills">
                    <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#portfolio">1 <b class="caret"></b></a>
                        <ul class="dropdown-menu " id="prtf">
                            <li><a href="#">1.1</a></li>
                            <li><a href="#">1.2</a></li>
                            <li><a href="#">1.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<!-- bootstrap -->
<script src="bootstrap3/js/bootstrap.min.js"></script>  

解决方案

I copy pasted your navbar section to jsfiddle and it seems to be working as it should. I think it could be that your js file path is not correct.

jsFiddle: https://jsfiddle.net/AndrewL32/LrLffj2m/1/

Please replace this line:

<script src="bootstrap3/js/bootstrap.min.js"></script>

With this:

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

这篇关于Bootstrap navbar mobile-toggle不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！