css - MVC5 在 EditorFor 旁边添加字形图标

Question

这让我有点疯狂地调整我在 EditorFor 文本框旁边添加的字形所需的宽度。

我在下面的 EditorFor 旁边添加了一个字形图标，注意我最初放置了 .col-md-10，这是 MVC5 View 模板默认生成的:

    <div class="form-group">
        @Html.LabelFor(model => model.ContactedDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10 input-group">
            @Html.EditorFor(model => model.ContactedDate, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
            <span class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
            @Html.ValidationMessageFor(model => model.ContactedDate, "", new { @class = "text-danger" })
        </div>
    </div>

它看起来像这样，请注意字形太远了:

我稍后将 .col-md-10 更改为 .col-md-4 ，如下所示:

还有一段距离，当我使用 .col-md-3 时，它会与框重叠:

更重要的是，当我调整浏览器的宽度时，当我使用 .col-md-4 或 .col- 时，glyphicon 只会移动到第一个屏幕截图的位置md-3，好像它不紧挨着文本框。

我也检查了这个question在这里，但这对我没有帮助。

如何正确添加字形图标？

Answer 1

一个新的 ASP.NET MVC 元素带有一个 Site.css样式表。导致问题的规则是下面的规则，它使所有 <input>有一个max-width:280这搞砸了你的.input-group :

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

您可以更改上述规则以包含 .input-group并具有以下内容:

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

编辑:这个 CSS 也打破了 .form-block Bootstrap 类，因此您还需要以下规则。

input.form-block,
select.form-block,
textarea.form-block {
max-width: none;
}