Группа ввода Bootstrap с раскрывающимся меню

Question

Я использую версию Legacy Bootstrap (2.3) для поддержки инструмента, который в ближайшее время не планируется для обновления.

Я пытаюсь создать простой стиль фильтра Dropdown & Группа ввода, но у меня есть некоторые проблемы с меню.

Вот мой код:

<div id="main" class="container"> 
<div class="page-header"> 
    <h3 class="text-info"> 
    Training Summary <small>Schedule Breakdown</small> 
    <span class="pull-right"> 
     <div class="input-prepend input-append"> 
      <button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle"> 
      Start Date&nbsp;&nbsp; <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
      <input class="span2 dp cen" type="text" placeholder="Select a Start Date" name="startDate"> 
      <button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle"> 
      End Date&nbsp;&nbsp;<span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
      <input class="span2 dp cen" type="text" placeholder="Select an End Date" name="endDate"> 
      <button class="btn" type="button" name="fetch"><i class="icon-refresh"></i></button> 
     </div> 
    </span> 
    </h3> 
</div> 

То, что я пытаюсь сделать, это получить раскрывающееся меню, чтобы срабатывать при нажатии на «Start Date» или «End Date» выпадающих. Кажется, ничего не происходит, и я не слишком уверен в этом.

Я создал скрипку, чтобы показать проблему: http://jsfiddle.net/3h6x6ztw/1/

Моя цель состоит, чтобы получить выпадающее меню, чтобы показать под кнопками, как они обычно были бы в раскрывающемся меню. Не уверен, что это что-то, что мне не хватает или просто проблема синтаксиса.

Answer 1

В Bootstrap плагины могут быть включены индивидуально (с использованием отдельных файлов * .js Bootstrap) или все сразу (используя bootstrap.js или minified bootstrap.min.js).

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины в отдельности, обязательно проверьте эти зависимости в документах. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина).

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

Также вы должны установить содержание для button А.Н. ul.dropdown-menu с position: relative, потому что ul.dropdown-menu имеет position: absolute по умолчанию в бутстрапу btn-group

что-то вроде этого:

<div class="btn-group"> 
    <button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle"> 
      Start Date&nbsp;&nbsp; <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
    </ul> 
</div> 

Here a jsfiddle example to play with