Question

背景：我正在处理的网站有几个不同的过滤器，人们可以使用这些过滤器只显示他们需要的数据;基本的东西。为了让事情看起来不错，因为我不是css倾向，我使用bootstrap使事情看起来很干净。

问题：我似乎无法让按钮与字段的右侧对齐。我可以让它们拉到场地的边缘，我可以将它们推到/拉到他们应该进入的一般区域，但是我不能让它们很好地排列并保持这种方式而不管如何您重新排列页面窗口的大小。

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

对齐按钮以与fieldset对齐

3 个答案: