twitter-bootstrap 居中登录表单引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34588593/
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
Centering Login Form Bootstrap
提问by Hyman Damon
I'm having some trouble centering my Bootstrap login form.
我在将 Bootstrap 登录表单居中时遇到了一些麻烦。
Centering
定心
I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.
我尝试了许多不同的方式来使表单居中。整个 div 以 col-md-offset 类为中心，但我不明白如何使内容（表单输入）以 div 本身为中心。对于我知道的文本，您可以使用文本对齐，对于内容，我通常使用 margin: 0, auto; ，但这不适用于表单。
I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.
如果可能的话，我也想将它垂直居中，但考虑到我在互联网上的研究，这样做似乎很难，而且我在引导程序参考资料中没有找到任何解释如何这样做的内容。
Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.
另一个随机问题是，为什么表格上的左角是直角，而右角是圆角？即使我改变了角半径，它也只会影响右角。
CODE:
代码：
回答by vanburen
If you want to place the form in the center of the screen then use position: absoluteand don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.
如果要将表单放置在屏幕中央，请使用position: absolute而不是使用网格。您可以使用媒体查询来控制其他因素，具体取决于您在较小或较大视口上的最终需求。
Also, you're use of input-group(Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-groupinstead.
此外，您使用input-group( Docs) 并没有真正意义，这就是您在输入上使用不利样式的原因（一个比另一个短，并且border-radius）。使用form-group来代替。
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
@media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>回答by shiva chauhan
You can use this:
你可以使用这个：
.input-group {
position: relative;
border-collapse: separate;
display: block;
}
回答by Siddharth
you can use
您可以使用
.input-group{
margin:0px auto;
}
here is a binworking fine with same rules.
这是一个使用相同规则正常工作的垃圾箱。
the reason you input box has right-top and right-bottom radius but not the left-top and left-right is that it is excepting something on the left of it, like some button or something, let me throw a linkto make it understand better. go to amount field on this link. we can always overwrite the bootstrap rules but it is not recommended when there is a problem with use of classes, good luck.
你输入框有右上和右下半径而不是左上和左右的原因是它除了左边的东西，比如某个按钮或其他东西，让我抛出一个链接来制作它更好地理解。转到此链接上的金额字段。我们总是可以覆盖引导程序规则，但是当类的使用出现问题时不建议这样做，祝你好运。
well well well, sorry for frequent edits, but check out the use of .input-groupclass, i guess you messed it up there
好吧好吧，抱歉频繁编辑，但请查看.input-group类的使用 ，我想你把它搞砸了
回答by SzybkiSasza
I would recommend using column layout in a proper way. You could wrap your login elements in divs that are based on column layout grid with length 4 and offset equal 4 too. You would get elements centered on the page and fully responsible. Then you could style elements inside them as in normal form groups.
我建议以适当的方式使用列布局。您可以将登录元素包装在基于列布局网格的 div 中，该网格长度为 4，偏移量也等于 4。您将获得以页面为中心的元素并完全负责。然后，您可以像在正常表单组中一样设置其中的元素样式。
I'd also recommend not using input groups as they are designed to group inputs as the name suggests and this is the reason you have square corners on left side of the inputs (for other inputs on left to seamlessly integrate into one input group) :)
我还建议不要使用输入组，因为顾名思义，它们旨在对输入进行分组，这就是您在输入左侧有方角的原因（用于左侧的其他输入无缝集成到一个输入组中）： )
Just put every form row inside that structure:
只需将每个表单行放在该结构中：
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="input-group">(...)</div>
</div>
</div>
Look here: JSBin example
看这里： JSBin 示例
Good note for future use of any library, including bootstrap - it is a good way to read all examples of use of particular library and its documentation, because otherwise you could end up overwriting functionalities that are already provided within it :)
对未来使用任何库（包括引导程序）的好说明 - 这是阅读使用特定库及其文档的所有示例的好方法，否则您最终可能会覆盖其中已提供的功能:)
