ASP .NET MVC 如何使用@Html.EditorFor 增加输入字段的宽度答案

【问题标题】：ASP .NET MVC How to increase the width of an inputfield with @Html.EditorForASP .NET MVC 如何使用@Html.EditorFor 增加输入字段的宽度
【发布时间】：2015-07-30 13:52:14
【问题描述】：

我只是无法解决看起来如此简单的问题。我想要一个模型属性的文本框（editorfor），我想增加它的宽度，但什么也没发生。我正在使用下面列出的代码。我尝试将宽度设置为 500px，但没有任何反应。理想情况下，我希望文本框延伸到容器的整个宽度。有什么想法吗？

@if (Model.isAnswerVisible)
    {
        <div class="form-group">
            <div class="col-md-10">
                <div class="input-group">
                    <span class="input-group-addon">@Model.AreaNameAnswer</span>
                    @Html.EditorFor(model => model.Answer, new { htmlAttributes = new { id = "answer", style = "width: 500px", onkeyup = "limitCharacters()", @class = "form-control" } })
                </div>

                @Html.ValidationMessageFor(model => model.Answer, "", new { @class = "text-danger" })
                <span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Leg kort uit wat jouw antwoord is op de vraag"></span>
                <label id="lblCountAnswer" style="color: green">@Model.MaxTokensAnswer</label>
            </div>
        </div>
    }

【问题讨论】：

你是否在css文件中设置了最大宽度或其他内容？
默认的 mvc 模板有一个 css 规则：input, select, textarea { max-width: 280px; }。我通常把它拿出来。
@Jasen 我不知道这个默认的 CSS 规则，哈哈。那解决了它。感谢您的评论。
@Kevainzorz 您可以使用现代浏览器来确定当前应用的样式以及它们的定义位置（在大多数情况下按 F12 并浏览选项）

标签： c# html css asp.net asp.net-mvc

【解决方案1】：

默认的MVC5模板在Site.css中有一个css规则：

input, select, textarea { max-width: 280px; }

我通常会删除这条规则。

这会导致 Bootstrap v3 输入组出现问题，其中输入框没有扩展到其容器的宽度。

颠倒你的元素的顺序，你会得到一个间隙：

不是这个

<div class="row">
    <div class="col-md-4">
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-btn">
                <button class="btn btn-primary">OK</button>
            </span>
        </div>
    </div>
</div>

【讨论】：