Html 如何使用 BootStrap 将表单水平居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9481440/
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 horizontal center a form using BootStrap?
提问by Marco
Hi there i am trying to position a login form in the middle of the screen using BootStrap 2. I have tried several combinations using offset etc. But i do not seem to have anu luck..
嗨，我正在尝试使用 BootStrap 2 在屏幕中间放置一个登录表单。我尝试过使用偏移等的几种组合。但我似乎没有运气..
<div class="row-fluid">
<form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'>
...
</form>
</div>
Any suggestions on how i can achieve this?
关于如何实现这一目标的任何建议？
回答by csturtz
if you want to use the grid system start by following @Pickle's answer. This will center the spanned columns that contain your form. If you want the form centered w/in that span, you'll have to do a bit more work such as the things mentioned by @kajo in his comment on your question.
如果您想使用网格系统，请按照@Pickle 的回答开始。这将使包含表单的跨列居中。如果您希望表单在该范围内居中，您将不得不做更多的工作，例如@kajo 在他对您的问题的评论中提到的内容。
To elaborate on @Pickle's answer, here's some sample code that centers a span of 4 columns in the default 12-column grid. If you need a different number of columns spanned, use @Pickle's formula (but keep in mind your number of spanned columns must be an even number)
为了详细说明@Pickle 的答案，这里有一些示例代码，它在默认的 12 列网格中将 4 列的跨度居中。如果您需要跨越不同数量的列，请使用@Pickle 的公式（但请记住，您的跨越列数必须是偶数）
<div class="container">
<div class="row">
<div class="offset4 span4">
.. form goes here ..
</div>
</div>
</div>
回答by PersianMan
Normally all spans are floated to left. So you have to float it to none and then set the margin to auto.
通常所有跨度都向左浮动。因此，您必须将其浮动为无，然后将边距设置为自动。
Something like this:
像这样的东西：
<div class="span8" style="float:none; margin:0 auto"></div>
回答by Quasipickle
Just set the classes so 2 * offsetClass + span class = 12 columns.
只需将类设置为 2 * offsetClass + span class = 12 列。
ie: .offset4.span4
IE： .offset4.span4
回答by Gabe K
Unfortunately, currently the offset class doesn't work properly inside the row-fluid element.
不幸的是，目前偏移类在 row-fluid 元素中无法正常工作。
https://github.com/twitter/bootstrap/pull/2394
https://github.com/twitter/bootstrap/pull/2394
If you want to use the row-fluid element, you can add a span4 with a br tag in it before your content div.
如果你想使用 row-fluid 元素，你可以在你的内容 div 之前添加一个带有 br 标签的 span4。
回答by Junior Mayhé
After struggling so much with this center issue, I managed to create my own tweeks
在为这个中心问题苦苦挣扎之后，我设法创建了自己的 tweeks
CSS:
CSS：
.control-group.center{ float:none;margin:0 auto;width:400px;margin-bottom:20px;}
.control-group .field {width:140px;float:left}
.control-group .l {width:120px;float:left;line-height: 29px;}
.row-fluid .offset4{
display: block!important;
float: none!important;
width: 100%!important;
margin-left: 0!important;
padding:0 80px;
}
@media (max-width: 497px){
.control-group.center {text-align: center;float:inherit;width: auto}
.control-group .field,.control-group .l {width:120px;float:none;text-align: center;width: auto}
}
HTML:
HTML：
<div class="container">
<div class="row-fluid">
<div class="offset4 span2">
<form class="form-horizontal" action="enviar-pedido.php" method="post">
<fieldset>
<legend>Ingrese sus datos:</legend>
<div class="control-group center">
<div class="l">Nombre</div> <div class="field"><input type="text" id="txtNombre" name="txtNombre" placeholder="Nombre"></div>
</div>
<div class="control-group center">
<div class="l">Email</div> <div class="field"><input type="text" id="txtEmail" name="txtEmail" placeholder="Email"></div>
</div>
<div class="control-group center">
<div class="l">Teléfono</div> <div class="field"><input type="text" id="txtTelefono" name="txtTelefono" placeholder="Telefono"></div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Now it is finally forevercentered even when resizing the browser (Chrome and Firefox)
现在即使调整浏览器的大小（Chrome 和 Firefox），它也终于永远居中了
