Question

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

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

我真的不明白为什么会发生这种情况，但我认为它与行的一些边缘/填充问题有关...我正在寻找一个答案解释为什么会发生这种情况所以我能理解问题并赢得了'再次处理它:)。

我也会在这里发布我的标记：

<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迁移说明的更多信息：Here

Answer 2

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

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

Answer 3

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

尝试

<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

只需将 pull-right 更改为 float-right 即可解决我的问题。

Answer 5

使用向右浮动

该文本在右边。

Answer 6

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

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

npm uninstall bootstrap

npm install bootstrap@3

Answer 7

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>

Bootstrap pull-right无法按预期工作

7 个答案: