Question

视图中的代码如下所示：

@model StatusZN.Models.LoginViewModel

@{
    ViewBag.Title = "Логин";
}

@{
    Layout = null;
}

<h2>@ViewBag.Title</h2>
<div class="row">
    <div class="col-lg-6 col-lg-offset-3 text-center">
        <section id="loginForm">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div class="form-group">
                @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.UserName, new { autofocus = "autofocus", @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.UserName)
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Password)
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <div class="checkbox">
                        @Html.CheckBoxFor(m => m.RememberMe)
                        @Html.LabelFor(m => m.RememberMe)
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Логин" class="btn btn-default" />
                </div>
            </div>
            <p>
                @Html.ActionLink("Зарегистрироваться", "Register") если у вас нет учетной записи.
            </p>
        }
        </section>
    </div>
</div>

表格位于左上角。我尝试了很多东西，但它没有帮助。我使用的是Bootstrap 3.0。

Answer 1

你有什么尝试？

您可以使用Bootstraps偏移工具将表单控件推送到网格的任何位置。

@Html.LabelFor(m => m.UserName, new { @class = "control-label col-md-2 col-md-offset-2" })

这将推动标签，更正确的标签，右2列。始终牢记响应能力......

您必须确保您的代码引用了cshtml中的bootstrap css文件。

只需将此添加到.cshtml文件的顶部即可。参考如下：

@{
    Layout = null;
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<h2>@ViewBag.Title</h2>
<div class="row">

当我在调试中运行时，这就是结果。你可以在bootstrap中使用网格系统来获得你想要的东西。

如何将MVC表单放在屏幕中央？

1 个答案: