2015-11-10 2 views
1

По какой-то причине мой выпадающий список в моей навигационной панели не работает; ничего не происходит при нажатии. Мне также кажется странным, потому что я скопировал этот код из другого места, и он не работает. Я несколько раз проверял опечатки, но ничего не придумал.My Bootstrap Dropdown не работает HTML/CSS/BOOTSTRAP

Мой HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Website Template</title> 
     <!-- links to the css page and bootstrap --> 
     <link rel="stylesheet" type="text/css" href="main.css"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    </head> 
    <body> 
<!-- BEGIN NAVBAR --> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header pull-left"> 
      <a class="navbar-brand" href="#">Project Name</a> 
     </div> 
     <div class="navbar-header pull-right"> 
      <ul class="nav navbar-nav pull-left"> 
       <li><a class="" href="#">Text</a></li> 
      </ul> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Text</a></li> 
       <li><a href="#">Text</a></li> 
       <li><a href="#">Text</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> 
         <li><a href="#">Text</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Text</li> 
         <li><a href="#">Text</a></li> 
         <li><a href="#">Text</a></li> 
        </ul> 
       </li> 
      </ul> 
      <div class="navbar-right"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Text</a></li> 
        <li><a href="#">Text</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- END NAVBAR --> 

     <div class="jumbotron"> 
      <div class="container"> 
       <h1>Text</h1> 
       <p>Paragraph.</p> 
      </div> 
     </div> 
    </body> 
</html> 

Мой CSS:

.jumbotron { 
    text-align: center; 
} 

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

ответ

1

Вы не ссылки на библиотеку JQuery и библиотеки Bootstrap.js в вашем <head> тег .. навигационной панели требует библиотеку JavaScript (collapse.js), все, что вам нужно, это here, проверьте текст в большом красном поле.

EDIT: Поместите этот тег CDN в свой <head>, обязательно поставьте последнюю библиотеку jQuery перед этой строкой.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
Смежные вопросы