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

像这样（注意在“现在”按钮中添加了类ig-mid-btn）：

<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

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

1 个答案: