下拉当导航栏崩溃

这里不工作是代码：下拉当导航栏崩溃

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

所以问题是，每当我缩小浏览器的大小，导航栏崩溃，并点击切换按钮变得可见。但是，当导航栏崩溃时，下拉菜单不起作用。我认为这是由于容器框限制下拉选项可见的问题。

来源

2016-03-08 Shubham Chahal

我认为'nav-pills'可能会导致问题。你可以在这个例子中看到它正在工作：https://jsfiddle.net/qw8bnze2/ 正如一般建议 - 通过https：//加载外部文件（如果它们通过SSL连接可用）。这样你就可以避免出错。并在头文件中保留