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 px などのハードコードされた値を使用しないことをお勧めします。代わりに、次のようなスパン クラスを適用して幅を設定できます。

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

ログイン フォームの幅が 6 行で、左右に 3 行のオフセットがあります (12 行がデフォルトのブートストラップ グリッドです)。

于 2013-03-21T05:18:03.297 に答える