【问题标题】:Bootstrap navbar mobile-toggle isn't workingBootstrap 导航栏移动切换不起作用
【发布时间】:2015-10-27 07:15:29
【问题描述】:

当我缩小浏览器时,移动切换是可见的,但是当我点击它时,它不会展开。我不知道为什么会这样。

<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>  

【问题讨论】:

  • 你应该在 中加载你的 javscript
  • 那么它至少应该在你的导航栏之前吧?
  • @5ervant,不过有趣的是,如果您转到模板并检查他们在 getbootstrap.com/examples/starter-template 中导入 js 文件的页面
  • @5ervant 最好在 head 部分加载 js 依赖项,除非它们导致页面加载问题
  • 根据引导它不是。

标签: html twitter-bootstrap navbar


【解决方案1】:

我将您的导航栏部分复制粘贴到 jsfiddle,它似乎可以正常工作。我想可能是你的js文件路径不正确。

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

请替换此行:

&lt;script src="bootstrap3/js/bootstrap.min.js"&gt;&lt;/script&gt;

有了这个:

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;

【讨论】:

  • 感谢您的提示,这就是解决方案!
  • 很高兴我可以帮助 Eddi :) 另外,请考虑将 js 链接按原样移动到您的头部,正如正确的编码实践所述。
  • 我通常将它放在头部区域,但没有引导。当我最后集成 JS 文件时,页面会更快。但再次感谢!
猜你喜欢
  • 1970-01-01
  • 2018-09-03
  • 1970-01-01
  • 2018-09-15
  • 2018-09-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多