2014-11-02 5 views
0

Выпадающий список в навигации не работает. Html выглядит следующим образом. Помощь будет оценена.Nav dropdown не работает

<div class="row menu_bg"> 
    <div class="container"> 
     <ul class="nav nav-tabs"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">SVN</a></li> 
     <li><a href="#">iOS</a></li> 
     <li><a href="#">VB.Net</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
      Java <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Swing</a></li> 
      <li><a href="#">jMeter</a></li> 
      <li><a href="#">EJB</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 

      </ul> 
     </li> 
     <li><a href="#">PHP</a></li> 
    </ul> 
    </div> 

ответ

0

Вам необходимо включить бутстраповскую и Jquery библиотеки, они обрабатывают логику для отображения интерфейса выпадающего рабочего примера ниже:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
    </head> 
    <body> 
     <div class="row menu_bg"> 
      <div class="container"> 
       <ul class="nav nav-tabs"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">SVN</a></li> 
        <li><a href="#">iOS</a></li> 
        <li><a href="#">VB.Net</a></li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
          Java <span class="caret"></span> 
         </a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Swing</a></li> 
          <li><a href="#">jMeter</a></li> 
          <li><a href="#">EJB</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 

         </ul> 
        </li> 
        <li><a href="#">PHP</a></li> 
       </ul> 
      </div> 
     </div> 
     <script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
    </body> 
</html> 
2

Вашего HTML отлично единственное, что отсутствует код JQuery и bootstrap js, добавьте их в том же порядке, что и ваш последний </div>.

<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
0

Вы имели container внутри row и содержание внутри container, я исправил это. Правильная иерархия: container =>row =>col-??-##. If you put it in any other order, it will malfunction. This should work. I'm assuming you've added thetag for bootstrap.min.js (or whatever flavor you prefer) and jquery`. Если нет, сделайте это.

<div class="container menu_bg"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <ul class="nav nav-tabs"> 
       <li role="presentation" class="active"><a href="#">Home</a></li> 
       <li role="presentation"><a href="#">SVN</a></li> 
       <li role="presentation"><a href="#">iOS</a></li> 
       <li role="presentation"><a href="#">VB.Net</a></li> 
       <li role="presentation" class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Java<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Swing</a></li> 
         <li><a href="#">jMeter</a></li> 
         <li><a href="#">EJB</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
       <li><a href="#">PHP</a></li> 
      </ul> 
     </div> 
    </div> 
</div>