此处使用 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>
最佳答案
对于那些正在使用 bootstrap4 的人:
Added
.float-{sm,md,lg,xl}-{left,right,none}
classes for responsive floats and removed.pull-left
and.pull-right
since they’re redundant to.float-left
and.float-right
.
更多信息来自 Bootstrap4 迁移说明:Here
关于html - Bootstrap pull-right 无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35036669/