twitter-bootstrap 如何使用 Bootstrap 将表单控件居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37843486/
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 to center form controls with Bootstrap
提问by John Doe
What am I missing?
I can see the border of the container and it correctly shows the area that I have to work with.
However when I add the row (div) and offset(div) it is left justifying it.
我错过了什么？
我可以看到容器的边界，它正确地显示了我必须使用的区域。但是，当我添加行 (div) 和偏移量 (div) 时，它会对其进行调整。
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" class="form-control" />
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" class="form-control" />
</div>
</div>
</div>
</div>
回答by Demonic Penguin
I think I know what you are meaning, but I'm not sure. Do you mean like this?
我想我知道你的意思，但我不确定。你的意思是这样吗？
If so, the class for that is:
如果是这样，那类是：
class="text-center"
So you can change your code to this:
因此，您可以将代码更改为：
<div id="page" class="container" style="border:solid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">First Name:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input id="lastName" class="form-control text-center" type="text">
</div>
</div>
</div>
Or you can add it to just the controls you want, for example just the input form controls.
或者您可以将它添加到您想要的控件中，例如仅添加到输入表单控件中。
Hope that helps!
希望有帮助！
回答by Marcelo Martins
Bootstrap can provide a great mobile experience, but desktops can also benefit from its scaffolding capabilities. So, when I develop forms I like to use the least amount of space possible. With that in mind I have improved on Demonic Penguin's code and your, as well. Like so:
Bootstrap 可以提供出色的移动体验，但台式机也可以从其脚手架功能中受益。因此，当我开发表单时，我喜欢尽可能使用最少的空间。考虑到这一点，我改进了 Demonic Penguin 的代码和你的代码。像这样：
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
<div class="form-group">
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
回答by Marcelo Martins
You can also embellish your form by adding icons to the fields, like so:
您还可以通过向字段添加图标来修饰您的表单，如下所示：
<div id="page" class="container" style="border:solid">
<div class="row" style="padding-top: 12px;"></div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
<input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
<input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
</div>
For this implementation, you must add a FontAwesome CSS reference link to your page(s) that you can get from here: https://www.bootstrapcdn.com/fontawesome/
对于此实现，您必须向您的页面添加一个 FontAwesome CSS 参考链接，您可以从此处获取该链接：https://www.bootstrapcdn.com/fontawesome/
