带下拉菜单的引导输入组答案

【问题标题】：Bootstrap Input Group with Dropdown Menu带下拉菜单的引导输入组
【发布时间】：2015-07-23 13:29:41
【问题描述】：

我正在使用 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>

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

我创建了一个小提琴来显示问题：http://jsfiddle.net/3h6x6ztw/1/

我的目标是让下拉菜单像通常在下拉菜单中一样显示在按钮下方。不知道是我遗漏了什么还是只是语法问题。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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，引导程序中的默认值为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

【讨论】：