Html Bootstrap 右拉无法按预期工作

Bootstrap pull-right not working as expected

提问by JorgeGRC

Simple question here using Bootstrap3. I wanted to create a sort of small filter that reloads the page below it. My requirement was to alignthis filter (two inputs and a small button) with the content sitting below it, making it fall to the rightest position possible.

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

I tried using pull-rightclass and indeed it pulled the filter right but there's still more room to fill. If you check the example I provided below, you'll see that my objective is to align the button with the right side of the purple row, but it fails.

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

I don't really understand why this happens, but I assume that it's related to some margin/padding issues with the rows.. I'm looking for an answer explaining why this happens so I can understand the problem and won't deal with it again :).

我真的不明白为什么会发生这种情况，但我认为它与行的一些边距/填充问题有关。再说一遍:)。

You can check my markup by clicking here on bootply

您可以通过单击此处的 bootply检查我的标记

Also I'll post my markup right here:

此外，我将在这里发布我的标记：

<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>

采纳答案by CBroe

Your form-group is aligned as far to the right as possible – but the content within it is not. You have only 4+4+2 wide columns in there, so you are “two columns short”, in the 12-column grid used by bootstrap.

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

You might want to simply offset the first one of those by 2, by adding col-xs-offset-2class – then the alignment should be closer to what you want to achieve.

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

回答by Isanka Wijerathne

For those who are using bootstrap4:

对于那些使用 bootstrap4 的人：

classes for responsive floats and removed .pull-left and .pull-right since they're redundant to .float-left and .float-right.

响应式浮动的类并删除了 .pull-left 和 .pull-right，因为它们对于 .float-left 和 .float-right 来说是多余的。

More information from Bootstrap4 migration notes: Here

来自 Bootstrap4 迁移说明的更多信息：这里

回答by Cyril Duchon-Doris

Bootstrap column layout will basically split the row into 12 columns. Here you are only defining 10 out of the twelve columns, which is why you have space left on the right.

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

Try

尝试

<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>

回答by GAURAV PAWAR

Use float-right

使用向右浮动

这段文字在右边。

回答by Tom Withers

Bootstrap Uses a 12 column grid:

Bootstrap 使用 12 列网格：

http://getbootstrap.com/css/#grid(Worth the read)

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

To make sure you don't have this white space you need to be using up all of the columns as I can see you are not

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

Here is how I would do your code:

这是我将如何执行您的代码：

<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>