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

引导程序 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"/>

Answer 2

对于正在使用 bootstrap4 的人：

添加了.float-{sm,md,lg,xl}-{left,right,none} 响应类 浮动并删除 .pull-left 和 .pull-right 因为它们是 冗余到.float-left 和.float-right。

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

Answer 3

对于那些不小心安装了 Bootstrap 第 4 版的人。

似乎在 Bootstrap 版本 4 中更改了一些关键字。可能最简单的方法是将 Bootstrap 回滚到版本 3。仅仅是因为您网站的其他部分也可能会受到影响，并且最初无法按预期工作。

npm uninstall bootstrap

npm install bootstrap@3

Answer 4

Bootstrap 使用 12 列网格：

http://getbootstrap.com/css/#grid（值得一读）

为了确保你没有这个空白，你需要用完所有的列，因为我可以看到你没有

这是我将如何处理您的代码：

<div class="container">
    <div class="row" style="background:slateblue;">
        <div class="col-xs-12">
            <form role="form" class="form-horizontal">
                <div class="form-group">
                     <div class="col-xs-5">
                            <input type="text" class="form-control text-center">
                    </div>
                    <div class="col-xs-5">
                            <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>
    </div>
</div>

Answer 5

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

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

Answer 6

引导列布局基本上会将行分成 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>