html – Bootstrap pull-right没有按预期工作

前端之家收集整理的这篇文章主要介绍了html – Bootstrap pull-right没有按预期工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里使用Bootstrap3的简单问题.我想创建一种小型过滤器,重新加载它下面的页面.我的要求是将这个过滤器(两个输入和一个小按钮)与位于其下方的内容对齐,使其尽可能地落到最右边的位置.

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

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

你可以查看我的标记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个宽列,所以你在bootstrap使用的12列网格中是“两列短”.

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

猜你在找的HTML相关文章