Question

我正在开发MVC 3应用程序我正在使用bootstrap进行设计。我已经创建了登录表单。我试图将它设置在屏幕的中心位置，但有些它是如何工作的。

这是我的代码。

@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>

}

该怎么办？

Answer 1

自动保证金为您完成此操作，无需使用<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>

Answer 2

我建议不要使用边距来进行水平对齐。尝试这样的事情：

<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>

这是我用来构建简单登录表单的代码。

Answer 3

由于您正在使用流体容器，因此响应式设计我建议避免使用像400 px这样的硬编码值。相反，您可以通过应用span类来设置宽度，如：

<div class="row-fluid">
    <div class="offset3 span6">

它为您提供左侧和右侧的6行和3行偏移的登录表单宽度（12行是默认的自举网格）。

如何把登录表格@屏幕中心

3 个答案: