Question

以下是代码：

<!DOCTYPE html>
<html lang="en">
 <head>
      <title>Examination Archives |</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial scale=1">
      <linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 </head>

 <body>
      <style>    
             body 
                {                    
                     background-color: #5F6163;                     
                }

     </style>

     <div class="container">
         <nav class="navbar navbar-inverse"role="navigation">
                     <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse"
                             data-target="#example-nav-collapse">
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                          </button>

                         <a class="navbar-brand" href="#">Examination Archives</a> 

                     </div>

                     <div class=" navbar-collapse collapse" id="example-nav-collapse">

                             <ul class="nav nav-pills">

                                        <li role="presentation" class="active"><a href="#">Home</a></li>

                                        <li role="presentation" ><a href="#">Syllabus</a></li>

                                        <li role="presentation" class="dropdown">

                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"  aria-haspopup="true" aria-expanded="false">

                                                Question Papers <span class="caret"></span>

                                                </a>

                                                 <ul class="dropdown-menu">

                                                      <li><a href="#">Semester 1</a></li>

                                                      <li><a href="#">Semester 2</a></li>

                                                      <li><a href="#">Computer Science</a></li>

                                                      <li><a href="#">Electrical</a></li>

                                                      <li><a href="#">Mechanical</a></li>

                                                      <li><a href="#">Chemical</a></li>

                                                      <li><a href="#">Civil</a></li>



                                                </ul>
                                        </li>

                                        <li role="presentation" class="dropdown">

                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"  aria-haspopup="true" aria-expanded="false">

                                                Assignment<span class="caret"></span>

                                                </a>

                                                 <ul class="dropdown-menu">

                                                      <li><a href="#">Computer Science</a></li>

                                                      <li><a href="#">Electrical</a></li>

                                                      <li><a href="#">Mechanical</a></li>

                                                      <li><a href="#">Chemical</a></li>

                                                      <li><a href="#">Civil</a></li>

                                                </ul>
                                        </li>


                                        <li role="presentation" class="dropdown">

                                                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"  aria-haspopup="true" aria-expanded="false">

                                                Faculty<span class="caret"></span>

                                                </a>

                                                 <ul class="dropdown-menu">

                                                      <li><a href="#">Computer Science</a></li>

                                                      <li><a href="#">Electrical</a></li>

                                                      <li><a href="#">Mechanical</a></li>

                                                      <li><a href="#">Chemical</a></li>

                                                      <li><a href="#">Civil</a></li>

                                                </ul>
                                        </li>
                             </ul>

                    </div>

            </nav>

     </div> 
 </body>
</html>

所以问题是每当我减小浏览器的大小时，导航栏就会折叠，并在单击切换按钮时显示。但是只要导航栏崩溃，下拉列表就不起作用了。我认为存在这个问题，因为容器盒限制了下拉选项可见。

Answer 1

尝试将您的jquery库放在顶部。

此外：你的链接说＆＃34; linkrel＆＃34;并且应该有一个空间＆＃34; link rel＆＃34;可能是问题所在。

当Navbar崩溃时，下拉列表不起作用

1 个答案: