twitter-bootstrap MVC Bootstrap 表单样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26952457/
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
MVC Bootstrap forms styling issue
提问by InitLipton
I'm having a small issue with my bootstrap mvc form. the margin for the form-group doesn't seem to be working when i add my Razor. Any help would be greatly appreciated.
我的 bootstrap mvc 表单有一个小问题。添加 Razor 时，表单组的边距似乎不起作用。任何帮助将不胜感激。
This is the form that doesn't take the styling properly
这是没有正确采用样式的形式
@using (Html.BeginForm("Contact", "Home"))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="formGroupInputLarge1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Fullname", tabindex = 1 })
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge2" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email Address", tabindex = 2 })
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge3" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
@Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = "Message", tabindex = 3 })
@Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">Send Mail</button>
</div>
</div>
</form>
}
But once i remove the Begin form it takes the correct styling
但是一旦我删除了 Begin 表单，它就会采用正确的样式
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="formGroupInputLarge1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Fullname", tabindex = 1 })
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge2" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email Address", tabindex = 2 })
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge3" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
@Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = "Message", tabindex = 3 })
@Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">Send Mail</button>
</div>
</div>
</form>
回答by
Your creating nested forms (a form within a form) which is invalid and not supported. Change
您创建的嵌套表单（表单中的表单）无效且不受支持。改变
@using (Html.BeginForm("Contact", "Home"))
to
到
@using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class="form-horizontal", role="form" }))
and remove the second form element (and its closing tag)
并删除第二个表单元素（及其结束标记）
<form class="form-horizontal" role="form">
As a side note, <label for="formGroupInputLarge1" ...>is not creating a correct labelelement since the forattribute has no relationship to any elements in your form. Instead use @Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" })which will associate the label with the textbox.
作为旁注，<label for="formGroupInputLarge1" ...>不会创建正确的label元素，因为该for属性与表单中的任何元素都没有关系。而是使用@Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" })which 将标签与文本框相关联。
回答by JOBG
Remove second the form and use:
删除第二个表单并使用：
@using (Html.BeginForm("ActionName", "ControllerName",
null,
FormMethod.Post, new { @class="form-horizontal" }))
{
回答by avdesh goswami
<div class="col-md-8">
<section id="loginForm">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Use a local account to log in.</h4>
<hr />
@Html.ValidationSummary(true, null, new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" })
</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, null, new { @class = "text-danger" })
</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="Log in" class="btn btn-default" />
</div>
</div>
<p>
@Html.ActionLink("Register as a new user", "Register")
</p>
@* Enable this once you have account confirmation enabled for password reset functionality
<p>
@Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*@
}
</section>
</div>
