html - Bootstrap pull-right 无法按预期工作

Question

此处使用 Bootstrap3 的简单问题。我想创建一种小型过滤器来重新加载其下方的页面。我的要求是将此过滤器(两个输入和一个小按钮)与其下方的内容对齐，使其落在可能的最右位置。

我尝试使用 pull-right 类，确实它向右拉过滤器，但仍有更多空间需要填充。如果您检查我在下面提供的示例，您会看到我的目标是将按钮与紫色行的右侧对齐，但它失败了。

我真的不明白为什么会发生这种情况，但我认为它与行的一些边距/填充问题有关。我正在寻找一个解释为什么会发生这种情况的答案，这样我就可以理解问题并且不会'不要再处理它了:)。

你可以查看我的标记by clicking here on bootply

另外，我会在这里发布我的标记:

<div class="container">
  <div class="row" style="background:slateblue;">
    <div class="col-xs-12">
    <form role="form" class="form-horizontal">
            <div class="form-group pull-right">
                 <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-4">
                        <input type="text" class="form-control text-center">
                </div>
                <div class="col-xs-2 col-sm-2" style="margin-top:3px;">
                        <button type="submit" class="btn btn-success">
                            <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                </div>
            </div>
      </form>
      </div><!-- main col 12-->
  </div><!--row-->
  <div class="row" style="background:slategrey; height:200px;">
  </div>
</div>

Answer 1

对于那些正在使用 bootstrap4 的人:

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsivefloats and removed .pull-left and .pull-right since they’reredundant to .float-left and .float-right.

更多信息来自 Bootstrap4 迁移说明:Here