twitter-bootstrap 如何将登录表单@屏幕中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15539948/
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 put login form @ center of screen
提问by Nil
I am developing MVC 3 application along with it I am using bootstrap for design. I have created the log in form. I am trying to set it at center position of the screen but some how its not working.
我正在开发 MVC 3 应用程序，我正在使用引导程序进行设计。我已经创建了登录表单。我试图将它设置在屏幕的中心位置，但有些方法不起作用。
This is my code.
这是我的代码。
@using (Html.BeginForm("LoginUser","Login",FormMethod.Post))
{
<div class="container-fluid" style="padding-left:0px; margin-top:165px; margin-left:140px;">
<div class="row-fluid">
<div class="span12 roundedDiv offset4" style="width:400px; height:250px;">
...
...
...
Controls...
....
....
</div>
</div>
</div>
}
what to do ?
该怎么办 ？
回答by Mark Tomlin
Margin auto does this for you, without having to use <center>.
Margin auto 为您执行此操作，而无需使用<center>.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style type="text/css">
#loginBox {
margin: 20% auto;
width: 200px;
}
</style>
</head>
<body>
<form action="index.php" method="POST" id="loginBox">
<input type="text" name="user" placeholder="Username" autocapitalize="off" /><br />
<input type="password" name="pass" placeholder="Password" /><br />
<input type="checkbox" name="remember"> Remember Me<br />
<input type="submit" value="Log In" name="login" />
</form>
</body>
</html>
回答by koss
I would advise against usage of margins for the horizontal alignment. Try something like this:
我建议不要在水平对齐中使用边距。尝试这样的事情：
<div class="container-fluid">
<div style="margin-top:20px;" class="row-fluid">
<div class="offset4 span4 well">
<h1>Login page</h1>
<form method="POST">
<label>Login:
<input type="text" placeholder="Enter your login" name="username" autofocus class="span12">
</label>
<label>Password:
<input type="password" placeholder="Enter your password" name="password" class="span12">
</label>
<hr>
<div class="btn-toolbar">
<button type="submit" class="btn btn-info">Log in</button><a href="/auth/google" class="btn">Sign in with Google</a>
</div>
</form>
</div>
</div>
This is code I used to build a simple login form.
这是我用来构建简单登录表单的代码。
回答by koss
Since you're using fluid container hence responsive design I'd recommend to avoid using hardcoded values like 400 px. Instead you can set it width by applying span class like:
由于您使用的是流体容器，因此我建议您避免使用像 400 像素这样的硬编码值。相反，您可以通过应用 span 类来设置它的宽度，例如：
<div class="row-fluid">
<div class="offset3 span6">
It gives you login form width of 6 rows and 3 rows offset on the left and right (12 rows is default bootstrap grid).
它为您提供 6 行和 3 行左右偏移的登录表单宽度（12 行是默认引导网格）。
