水平表单类未应用引导剃刀答案

【问题标题】：Horizontal Form Class not being applied bootstrap Razor水平表单类未应用引导剃刀
【发布时间】：2014-08-23 05:05:04
【问题描述】：

我正在尝试在 razor 中创建一个水平表单，但我似乎无法应用 css。其他所有内容都有正确的 CSS，但是当我尝试将类添加到 BeginForm 甚至正常时，它不起作用。

这是我的看法：

@using (Html.BeginForm(Html.BeginForm("Default", "Employee", null, FormMethod.Post, new { @class = "form-horizontal" })))
{
        <h2>Employee Search</h2>
            <fieldset>
                <div class="form-group">
                    @Html.Label("Company: ", new { @class = "control-label" })
                </div>
                <div>
                    @Html.DropDownList("cono", (List<SelectListItem>)ViewBag.CompanyList, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.Label("First Name: ", new { @class = "control-label" })
                </div>
                <div>
                    @Html.TextBox("firstName", Session["firstname"], new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.Label("Last Name: ", new { @class = "control-label" })
                </div>
                <div>
                    @Html.TextBox("lastName", Session["lastname"], new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.Label("Branch: ", new { @class = "control-label" })
                </div>
                <div>
                    @Html.DropDownList("branch", (List<SelectListItem>)ViewBag.BranchList, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.Label("Sales Rep: ", new { @class = "control-label" })
                    @Html.TextBox("salesRep", Session["salesrep"], new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.Label("Status Type: ", new { @class = "control-label" })
                    @Html.DropDownList("statusType", (List<SelectListItem>)ViewBag.StatusTypeList, new { @class = "form-control" })
                </div>

            </fieldset>
            <input type="submit" class="btn btn-default" name="DefaultPost" value="Search" />
            <input type="button" value="Clear" class="btn btn-default" onclick="location.href='@Url.Action("Default", "Employee")' " />
}

这是它的样子：

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

移除包裹标签的 div
给标签一个列类col-sm-3
将列类 col-sm-9 添加到包装输入的 div 中
确保form-group div 包含标签和包含输入的div。

剃刀语法

<div class="form-group">
    @Html.Label("Company: ", new { @class = "col-sm-3 control-label" })
    <div class="col-sm-9">
        @Html.DropDownList("cono", (List<SelectListItem>)ViewBag.CompanyList, new { @class = "form-control" })
   </div>
</div>

纯 HTML 格式...

  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

【讨论】：