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

Question

我只是无法修复看起来那么容易的东西.我想要一个模型属性的文本框(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>
    }

Answer 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>