Question

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

我已将控件放在表格尺寸中。一个维度用于标签，另一个维度用于输入编辑器（HTML Helper）。

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

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

甚至做了另一个css类

    .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中，您将空白控件放在容器类中并在其上应用自定义css。这将处理空白控件的宽度。现在，有时甚至在设置容器类的宽度时，它并不意味着它具有响应性，或者它确实使控件宽度如此之短！为了实现响应性的期望行为，用户可以为每个控件设置css并应用@ style =＆＃34; 100％！important;最小宽度：300像素;＆＃34 ;. 这是一个例子：

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

Answer 2

由于你正在使用Bootstrap，我建议完全放弃这种类型的布局。

您应该能够使用水平格式通过网格系统实现此目的： 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>

如果您真的想使用表格，我注意到您在表格元素上有一个表格响应类。这适用于父（包装）div。 http://getbootstrap.com/css/#tables-responsive

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

如何更改MVC 5 @ Html.EditorFor width

2 个答案: