html - 带下拉菜单的 Bootstrap 输入组

Question

我正在使用 Legacy Bootstrap 版本 (2.3) 来支持未计划很快升级的工具。

我正在尝试制作一个简单的过滤器样式下拉列表和输入组，但我在使用菜单时遇到了一些问题。

这是我的代码:

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

我想要做的是在您单击“开始日期”或“结束日期”下拉菜单时触发下拉菜单。似乎什么都没发生，我也不太清楚为什么。

我创建了一个 fiddle 来展示这个问题:http://jsfiddle.net/3h6x6ztw/1/

我的目标是让下拉菜单显示在按钮下方，就像它们通常出现在下拉菜单中一样。不确定是我遗漏了什么还是语法问题。

Answer 1

在 Bootstrap 中，插件可以单独包含(使用 Bootstrap 的单独 *.js 文件)，也可以一次全部包含(使用 bootstrap.js 或缩小的 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 bootstrap 默认是 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