CSS 如何正确对齐引导程序表单按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25420164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How right align bootstrap form button?
提问by Nadishan
Please tell me how right align this form "Log in" button using bootstrap. I tired to use pull-right class. But after resizing my button is not in the correct position.
请告诉我如何使用引导程序正确对齐此表单“登录”按钮。我厌倦了使用拉权类。但是调整大小后我的按钮不在正确的位置。
<div role="form">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button class="btn-info btn">Log in</button>
</div>
回答by Gildas.Tambo
You can use text-rightfirst you have to wrap it in a divlike this:
您可以text-right先使用您必须将其包装成div这样：
<div class="text-right">
<button class="btn-info btn">Log in</button>
</div>
LIVE-DEMO
现场演示
Here is the full code
这是完整的代码
<div role="form">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/> Remember Me
</label>
</div>
<div class="text-right"> <!--You can add col-lg-12 if you want -->
<button class="btn-info btn">Log in</button>
</div>
</div>
回答by Suganth G
回答by phyatt
If you are inside a container with rows and columns in Bootstrap4, all the floats don't work properly.
如果您在 Bootstrap4 中包含行和列的容器内，则所有浮动都无法正常工作。
Instead you have to add a spacer column to get things to align.
相反，您必须添加一个间隔柱以使事物对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<p>Float right demo inside a container-fluid, Bootstrap 4</p>
<div class="container-fluid">
<div class="row">
<div class="col bg-warning"></div><!-- This is the filler column -->
<div class="col-auto bg-success">.col-auto (Like a Float Right)</div>
</div>
</div>Hope that helps.
希望有帮助。
