Asp.net mvc 使用Razor对齐asp.net MVC5表单中的文本框和复选框

我知道过去也有人问过类似的问题，但我找不到一个匹配的问题来解决我的问题，所以请耐心听我说

我正在尝试构建一个带有一个文本框和各种复选框的表单。在文本框和每个复选框前面，但我不明白为什么文本框标签没有与复选框中的标签对齐，并且复选框没有与文本框对齐

这是我到目前为止的代码。请注意，我使用的是（bootstrap lumen.css）

@使用（Html.BeginForm（“Save”、“staff”））
{
@Html.AntiForgeryToken（）
工作人员
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.Email，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Email，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Email，“，new{@class=“text danger”}）
@LabelFor（model=>model.IsAdmin，htmlAttributes:new{@class=“controllabel col-md-2”}）
@CheckBoxFor（model=>model.IsAdmin）
@LabelFor（model=>model.candownloadcv，htmlAttributes:new{@class=“controllabel col-md-2”}）
@CheckBoxFor（model=>model.candownloadcv）
}

以下是渲染时的外观：

我试着删除所有类，看看是否有帮助，但在标签显示比复选框低很多的地方，一切似乎都变得一团糟，等等

我希望我的所有标签彼此对齐，我的文本框和所有复选框也彼此对齐

---

你能告诉我我做错了什么以及如何解决这个问题吗？

你能试试这个吗

@using (Html.BeginForm("Save", "Staffs"))
{
    @Html.AntiForgeryToken()
   <fieldset>
    <legend>Staff Member</legend>
    <div class="form-vertical">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group checkbox">
            @Html.LabelFor(model => model.IsAdmin, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">

                    @Html.CheckBoxFor(model => model.IsAdmin)

            </div>
        </div>
        <div class="form-group checkbox">
            @Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                    @Html.CheckBoxFor(model => model.CanDownloadCsv)

            </div>
        </div>

    </div>
</fieldset>
}

@使用（Html.BeginForm（“Save”、“staff”））
{
@Html.AntiForgeryToken（）
工作人员
@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.Email，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Email，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Email，“，new{@class=“text danger”}）
@LabelFor（model=>model.IsAdmin，htmlAttributes:new{@class=“controllabel col-md-2”}）
@CheckBoxFor（model=>model.IsAdmin）
@LabelFor（model=>model.candownloadcv，htmlAttributes:new{@class=“controllabel col-md-2”}）
@CheckBoxFor（model=>model.candownloadcv）
}

您认为

class=“checkbox”

的css与

class=“form group”

有什么不同？为什么要将

CheckBoxFor（）

包装在

中？（文本框用

包装）嗨，我只是在学习一个在线教程，我想这就是它的实现方式。我已经去掉了标签，但没有什么不同。复选框之间的距离稍近。应用于文本框的类似乎通过将其设置为col-md-10来进一步扩展它。我将尝试查找这两个类并发布它们（如果有帮助的话）。我怀疑您只需要将

替换为

或

，将

替换为

，并使用

@Html.CheckBoxFor（model=>model.IsAdmin，new{@class=“form control”}）

以匹配textbox@StephenMuecke你应该把这个作为答案！关于

，您是正确的。这一直是个问题。我在看其他的东西，但在我删除它的第二次，所有控件都成功对齐了。这似乎是Bits_Please的答案（除了缺少

CheckBoxFor（）

方法中的

new{@class=“form control”}

）我尝试了你的建议，但Chrome和Edge的布局都完全混乱了。

@using (Html.BeginForm("Save", "Staffs"))
{
    @Html.AntiForgeryToken()
   <fieldset>
    <legend>Staff Member</legend>
    <div class="form-vertical">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group checkbox">
            @Html.LabelFor(model => model.IsAdmin, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">

                    @Html.CheckBoxFor(model => model.IsAdmin)

            </div>
        </div>
        <div class="form-group checkbox">
            @Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                    @Html.CheckBoxFor(model => model.CanDownloadCsv)

            </div>
        </div>

    </div>
</fieldset>
}