Bootstrap pull-right 没有按预期工作

Posted 2023-03-06

【中文标题】Bootstrap pull-right 没有按预期工作

【英文标题】：Bootstrap pull-right not working as expected

【发布时间】：2016-05-04 08:43:40

【问题描述】：

这里使用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>

【问题讨论】：

您的表单组尽可能向右对齐 - 但其中的内容不是。 （由于您只有 4+4+2 宽的列，您可能希望通过添加 col-xs-offset-2 类将其中的第一个简单地偏移 2。）

为什么不用form-inline 而不是form-horizontal？

@CBroe 实际上使用该偏移量使内容正确对齐......所以它是由缺少列引起的，如果你在答案中解释它，我会接受你的。 @KhalidT。我只是用form-horizontal因为我不知道内联的，我搜索了一下，我认为更合适，谢谢！

@KhalidT。使用form-inline 会弄乱输入和按钮之间的所有间距:(

【参考方案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"/>

【参考方案2】：

对于正在使用 bootstrap4 的人：

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

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

【参考方案3】：

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

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

npm uninstall bootstrap

npm install bootstrap@3

【参考方案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>

【参考方案5】：

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

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

【参考方案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>

【讨论】：

+1 有用的答案，虽然我接受了 CBroe 的答案，因为他是第一个指出解决方案的用户