1

我正在开发 MVC 3 应用程序，我正在使用引导程序进行设计。我已经创建了登录表单。我正在尝试将其设置在屏幕的中心位置，但有些无法正常工作。

这是我的代码。

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

}

该怎么办 ？

4

3 回答 3

2

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>
于 2013-03-21T05:15:00.867 回答
1

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

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

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

于 2013-03-21T07:17:50.500 回答
0

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

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

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

于 2013-03-21T05:18:03.297 回答