对齐按钮以与字段集对齐

Question

背景：我正在开发的网站有几种不同的过滤器，人们可以使用它们来只显示他们需要的数据；基本的东西。因为我不喜欢 CSS，所以为了让事情看起来不错，我使用引导程序来让事情看起来干净。

问题：我似乎无法让按钮与字段的右侧对齐。我可以让他们拉到场地的最边缘，我可以让他们推/拉他们应该在的一般区域，但我不能让他们很好地排列并保持这种状态，无论你如何重新排列页面窗口的大小。

JSFiddle：https://jsfiddle.net/v3cugpx1/1/

<div class="form-group col-md-12">
    <div class="input-group-btn">
        <div class="pull-right">
            <a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
            <button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
        </div>
    </div>
</div>

任何帮助将不胜感激。

干杯！

Answer 1

由于网格中的排水沟，匹配列的嵌套很重要，其他答案对此进行了评论。如果您从其他两个答案开始，很容易修改它们以在您正在寻找的按钮之间添加边距：

<div class="form-group col-md-12">
  <div class="col-md-12">
    <div class="btn-toolbar col-md-12">
      <a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
      <button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
    </div>
  </div>
</div>

唯一真正真正的添加是最内层 div 的 btn-toolbar 类。对于后代，这里是Fiddle。

Answer 2

不要使用.input-group 而是使用col-sm-* 类来多次提供额外的填充，以便您可以匹配所有其他表单元素上可用的填充。然后在里面排列按钮，比如：

<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
  <div class="col-xs-12"> <!-- Extra Padding (15px) -->
    <div class="col-xs-12"> <!-- Extra Padding (15px) -->
      <a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
      <button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
      </div>
  </div>
</div>

查看更新后的Fiddle。

希望这会有所帮助！

Answer 3

您正在为输入使用包装器 cols。我在按钮的“表单组”之前添加了一个“col-md-12”，在它之后添加了另一个。这样，您的代码就可以保持一致并实现您想要的。

<div class="col-md-12"> <----
    <div class="form-group col-md-12">
        <div class="col-md-12"> <----
            <div class="input-group-btn">

更新Fiddle