html - 未应用水平表单类 Bootstrap Razor

Question

我正在尝试在 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")' " />
}

这是它的样子:

Answer 1

1. 删除包裹标签的div
2. 给标签一个列类 col-sm-3
3. 将列类 col-sm-9 添加到包装输入的 div
4. 确保 form-group div 包装标签和包装输入的 div。

Razor 语法

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