Question

我知道过去曾问过类似的问题，但我找不到一个匹配问题，并为我的问题提供解决方案，所以请耐心等待。

我正在尝试使用一个文本框构建一个表单，并在其下方显示各种复选框。在文本框和每个复选框的前面，但我无法弄清楚为什么文本框标签没有与复选框中的标签对齐，并且复选框未与文本框对齐。

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

@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="checkbox">
                @Html.LabelFor(model => model.IsAdmin, htmlAttributes: new { @class = "control-label col-md-2" })
                <label>
                    @Html.CheckBoxFor(model => model.IsAdmin)
                </label>
            </div>

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

这是渲染时的样子：

我已经尝试删除所有类以查看它是否会有所帮助，但是一切似乎都搞砸了标签显示的位置远低于复选框等等。

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

你能告诉我我做错了什么，怎么解决这个问题？

Answer 1

你能试试吗？

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

使用Razor将asp.net MVC5 Form中的文本框和复选框对齐

1 个答案: