带有 Html.EditorFor 的表格

Question

我正在尝试使用表格创建表单。我一共有7个字段。我希望完成的是一行有 3 个字段，第二行有 3 个字段，最后一行将是扩展的最后一个字段。我尝试使用 colspan 但是 NextAction 的 editorfor 框并没有一直延伸。此字段的右侧有一个边距。我尝试创建一个 CSS 类来消除边距，但效果不佳。

如何才能让 NextAction 字段一直延伸到最后一列？

下面我为表格的最后 2 行添加了代码。

            <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.Customer, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Customer, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Customer, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Principal, htmlAttributes: new { @class = "control-label col-md-2" })
                </td>
                <td style="width:300px">
                    @Html.EditorFor(model => model.Principal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Principal, "", new { @class = "text-danger" })
                </td>

                <td>
                    @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Product, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Product, "", new { @class = "text-danger" })
                </td>

            </tr>
            <tr>

                <td>
                    @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.DropDownListFor(m => m.Status, new SelectList(ViewBag.Status, "Status", "Text"), new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.Value, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Value, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Value, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.LabelFor(model => model.FollowUpDate, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td>
                    <div>
                        <div class="input-group date" data-provide="datepicker">
                            @Html.EditorFor(model => model.FollowUpDate, new { htmlAttributes = new { @class = "form-control" } })
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.NextAction, htmlAttributes: new { @class = "control-label labelpadding" })
                </td>
                <td colspan="5">
                    @Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control ", @style = "margin-right: 0 !important;"} })
                    @Html.ValidationMessageFor(model => model.NextAction, "", new { @class = "text-danger" })
                </td>
            </tr>
        </table>

Answer 1

由于您在项目中启用了 Bootstrap，请使用 Bootstrap 的 CSS 类 w-100。此类将使其应用的元素具有 100% 的宽度。这是添加了该类的更新后的EditorFor 行：

@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })

如果这不起作用，您可能有其他东西覆盖它。检查您的其他样式表和浏览器中呈现的 HTML。