Twitter bootstrap 在同一行上混合按钮组和输入组

我正在尝试创建一个包含多个按钮组和一个输入（用于日期字段）的工具栏。我似乎找不到一种方法来让这些元素保持在同一条线上

以下是我正在尝试使用的工具栏的摘录：

<div class="btn-group">
  <input class="form-control" type="text" id="date" name="date" size="4" >
  <button type="button" class="btn btn-default">Now</button>
  <button type="button" class="btn btn-default">All</button>
</div>

<div class="btn-group">
  <button type="button" class="btn">Active items</button>
  <button type="button" class="btn">Archive</button>
</div>

现在
全部的
活动项目
档案文件

我在这里创建了一个Plunkr：

我尝试了各种组合，包括在不同的列中剪切工具栏的所有按钮组，这会使事情变得更糟，也不起作用

我想知道这种行为是否可以实现，或者我是否遗漏了一些明显的东西。

像这样（注意在“现在”按钮上添加了class

ig mid btn

）：

---

见

谢谢。我还没有设法让它在应用程序的上下文中工作，但我让它重新开始工作。某些东西（我还不知道是什么）导致输入字段的行为异常。我希望能够很快找到原因。在应用建议的更改后，仍然必须升级到bootstrap 3.3.1，因为这在3.1.1中被破坏。

<div class="form-inline">
    <div class="form-group">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <div class="input-group">
            <input class="form-control" type="text" id="date" name="date" size="4">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default ig-mid-btn">Now</button>
            </span>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">All</button>
            </span>
        </div><!-- /input-group -->
        <div class="btn-group">
            <button type="button" class="btn">Active items</button>
            <button type="button" class="btn">Archive</button>
        </div>
    </div>
</div>

.ig-mid-btn{
    border-radius:0;
    border-left:0 none transparent;
}