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

Question

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

这是我正在尝试开始工作的工具栏的摘录：

<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：http://plnkr.co/lsvPD6yC7H8xRe4JsFdR

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

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

Answer 1

像这样（注意 class ig-mid-btn 添加到 'Now' 按钮：

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

有了这个CSS:

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

见this demo bootply

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

Mixing button groups and input groups on the same line

twitter-bootstrap

twitter-bootstrap-3