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>

Answer 1

对于那些使用bootstrap4的人:

响应浮点数的类,并删除.pull-left和.pull-right,因为它们是.float-left和.float-right的冗余.

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

Answer 2

您的表单组尽可能右对齐-但其中的内容不对齐。您在那里只有4 + 4 + 2宽的列，因此在引导程序使用的12列网格中，您的“两列短”。

您可能希望通过添加col-xs-offset-2类将其中的第一个偏移2，然后使对齐方式更接近您想要实现的目标。

Answer 3

Bootstrap列的布局基本上会将行分为12列。在这里，您只定义了12列中的10列，这就是为什么在右侧留有空间的原因。

尝试

<div class="form-group pull-right">
                 <div class="col-xs-4 col-xs-offset-2">
                        <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>

Answer 4

Bootstrap 5 从 Bootstrap 5 开始，.float-left已.float-right弃用并替换如下：

.float-left被替换为.float-start将元素向左浮动。

.float-right被替换为.float-end将元素向右浮动。

<img src="img/aj-24.jpeg" class="float-start"/>
<img src="img/aj-24.jpeg" class="float-end"/>