下拉當導航欄崩潰

這裏不工作是代碼：下拉當導航欄崩潰

<!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連接可用）。這樣你就可以避免出錯。並在頭文件中保留