我正在尝试使用表格创建表单。我总共有7个领域。我希望完成的是一行上有3个字段,第二行上有3个字段,最后一行是扩展的最后一个字段。我尝试使用colspan,但是NextAction的editorfor框并未一直扩展。该字段的右侧有一个空白。我尝试创建CSS类以消除空白,但是效果不佳。
如何获取它,以便NextAction字段一直扩展到最后一列?
下面,我为表的最后两行添加了代码。
<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>
答案 0 :(得分:1)
由于在项目上启用了Bootstrap,因此请使用Bootstrap的CSS类w-100
。此类将使它应用的元素具有100%的宽度。这是添加了该类的更新后的EditorFor
行:
@Html.EditorFor(model => model.NextAction, new { htmlAttributes = new { @class = "form-control w-100"} })
如果这不起作用,则可能还有其他方法可以覆盖它。检查其他样式表以及浏览器中呈现的HTML。