Bootstrap导航栏不会切换 [英] Bootstrap navbar will not toggle

问题描述

我对使用Bootstrap并不陌生，并且很乐意在那里的一位专业人士向我展示我在哪里犯错.

I am rather new to using Bootstrap, and would love for one of you pros out there to show me where I am making my mistake.

我要完成的工作:我正在使用Bootstrap在响应式网站上工作.我希望导航栏固定在顶部，当网页缩小到移动大小时，我希望导航栏在按下时显示菜单项.

What I am trying to accomplish: I am working on a responsive website using Bootstrap. I wish for my navbar to be fixed at the top, and when the web page is reduced to a mobile size, I would like for my navbar to show menu items when pressed.

问题:在移动浏览器尺寸下，导航栏在按下时不会显示任何菜单项.没有切换.

The problem: While in mobile browser dimensions, the navbar will not show any menu items when pressed. There is no toggle.

我尝试的方法:我浏览了其他用户的StackOverflow问题和评论，其中大多数人都说过确保数据切换"与"collapse navbar-collapse"类之后的id选择器匹配.

What I have tried: I have browsed through other user's StackOverflow questions and comments, in which the majority have said to make sure the "data-toggle" matches up with the id selector following the "collapse navbar-collapse" class.

您会发现这些匹配. myNavbar是一个ID选择器.解决方案不起作用.

You will find that these match up. myNavbar is an id selector. Solution does not work.

              <div class="container-fluid" id="contentsOfMenu">

                <div class="navbar-header page-scroll">

                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                  </button>
                  <div class"page-scroll">
                  <a href="#welcome" id="brandLabel"><img src="images/brainFishIconMenu.png"/></a>
                  <a class="navbar-brand" href="#welcome" >BrainFish</a>
                 </div>

                </div><!--end of navbar-header--------------------------->

                <div class="collapse navbar-collapse" id="myNavbar">

                  <ul class="nav navbar-nav navbar-right" id="navLinkColor">

                    <li class="page-scroll"><a href="#aboutUs">About</a></li>
                    <li class="page-scroll"><a href="#services">Services</a></li> 
                    <li class="page-scroll"><a href="#approach">Approach</a></li> 
                    <li class="page-scroll"><a href="#contact">Contact</a></li>          
                  </ul>

                </div><!--end of myNavBar-->

              </div><!--end of contentsOfMenu--------------------->

      </nav><!--end of navigation-->

推荐答案

首先请确保您在jquery脚本标记之后包含了bootstrap.js.然后检查您的导航栏标记，例如:

First make sure you have included bootstrap.js right after jquery script tag.Then check your navbar markup.for example:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="path/to/bootstrap.js" type="text/javascript"></script><!--required for navbar toggle--> 

还有

<div class="navbar navbar-inverse navbar-static-top navbar-topic">
            <div class="container">
            <div class="navbar-header"><!--navbar start-->
                <a  href="#"  class="navbar-brand"><!--Logo -->
                    your site
                </a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
            </div>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">

                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More things <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/html/webdesign/html.php">Html</a></li>
                            <li><a href="">Link</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>

                        </ul>


                        </li>
                        <li><a href="">Links</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>

这篇关于Bootstrap导航栏不会切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！