MVC Bootstrap Form styling issue

Question

У меня небольшая проблема с моей формой bootstrap mvc. маржа для группы форм, похоже, не работает, когда я добавляю свою Бритву. Любая помощь будет принята с благодарностью.

Это форма, которая не принимает стайлинг правильно

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

Но когда я удалить 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> 

Answer 1

Ваши создаваемые вложенные формы (форма внутри формы), которая является недопустимой и не поддерживается. Изменение

@using (Html.BeginForm("Contact", "Home")) 

к

@using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class="form-horizontal", role="form" })) 

и удалить второй элемент формы (и его закрывающий тег)

<form class="form-horizontal" role="form"> 

В качестве примечания, <label for="formGroupInputLarge1" ...> не создает правильный label элемент с момента Атрибут for не имеет отношения к каким-либо элементам в вашей форме. Вместо этого используйте @Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" }), который свяжет метку с текстовым полем.

Answer 2

Удалить секунду формы и использования:

@using (Html.BeginForm("ActionName", "ControllerName", 
      null, 
      FormMethod.Post, new { @class="form-horizontal" })) 
{ 

Answer 3

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