Bootstrap pull-right 无法按预期工作

Question

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

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

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

您可以 通过在 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>

原文由 JorgeGRC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的表单组尽可能靠右对齐——但其中的内容却没有。那里只有 4+4+2 宽的列，所以在 bootstrap 使用的 12 列网格中，你是“短两列”。

您可能希望通过添加 col-xs-offset-2 类来简单地将第一个偏移 2，然后对齐应该更接近您想要实现的目标。

原文由 CBroe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于那些使用 bootstrap4 的人：

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right .

来自 Bootstrap4 迁移说明的更多信息： 此处

原文由 Isanka Wijerathne 发布，翻译遵循 CC BY-SA 4.0 许可协议