如何更改 MVC 5 @Html.EditorFor 宽度

Question

我正在使用 MVC 5 Razor 设计一个编辑表单。我希望输入控件填充整个空白宽度，如图所示，但它不起作用。看这里的图片。 Page here

我已将控件置于 table 维度内。一维用于标签，另一维用于输入编辑器（HTML Helper）。

我尝试使用以下 css class 覆盖表单控件宽度，但没有成功：

    .form-control {
    width: 100%!important;
    }

甚至还做了另一个 css class

    .newinputwidth {
    width: 400px!important;
    }

但它不会改变输入的宽度。

完整的 MVC 代码在这里。

@model test2.Models.CaseReport

<style>
.form-control {
    width: 100%!important;
}
.newinputwidth {
    width: 400px!important;
}
</style>
<h2>Edit</h2>
<div class="container">
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <table id="dt" class="table table-condensed table-responsive table-bordered" width="100%" cellspacing="0">
                <tr>
                    <td>Main Id</td>
                    <td>
                        @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "newinputwidth" } })
                    </td>
                </tr>
                 <tr>
                    <td>Location</td>
                    <td>
                        @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
                    </td>
                </tr>
                <tr>
                    <td>Disease </td>
                    <td>
                        @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } })
                    </td>
                </tr>
            </table>
        </div>
        <div class="row col-lg-12 col-md-12 col-xs-12 text-center">
            <div>
                <div>
                    @Html.Action("_DetailsIndex", new { id = Model.CaseReportId })
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

    </div>
}
</div>

Answer 1

由于您使用的是 Bootstrap，我建议完全放弃 table 这种类型的布局。

您应该能够通过使用水平形式的网格系统实现此目的： http://getbootstrap.com/css/#forms-horizontal

<div class="row form-horizontal">
    <div class="col-md-12">
        <div class="form-group">
            @Html.LabelFor(model => model.CaseReportId, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ReportDate, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
    </div>
</div>

如果您真的想使用 table，我注意到您在 [=25] 上有一个 table-responsive class =] 元素。这意味着要在父级（包装器）上使用 div。 http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Answer 2

在 bootstrap 中，您将空白控件放在容器 class 中并在其上应用自定义 css。这将处理空白控件的宽度。现在，有时即使您设置了容器 class 的宽度，也并不意味着它是响应式的，或者它确实使控件宽度如此之短！为了实现用户可读的响应式期望行为，为每个控件设置 css 并应用 @ style="100% !important; min-width:300px;"。这是一个例子：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{ <div class="container" style="width:40%; margin:6%">
      <h4 style="color:darkorange">Register</h4>
        <div class="row text-center">
            <h5 style="color:tomato">@ViewBag.Message</h5>
        </div>
        @Html.AntiForgeryToken()
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @placeholder = "First Name",  @style = "width:100% !important; min-width:180px;" } })
                    @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                </div>
            </div>
  </div>
    </div>
  }

如何更改 MVC 5 @Html.EditorFor 宽度

How to change MVC 5 @Html.EditorFor width

css

editorfor

asp.net-mvc-5