MVC5在EditorFor旁边添加glyphicon

Question

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

我有下面的内容,我在EditorFor旁边添加了一个glyphicon,注意我最初放的.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>

它看起来像这样,请注意glyphicon是如此遥远:

我后来改.col-md-10到.col-md-4其成为下面:

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

更重要的是,当我调整浏览器的宽度时,当我使用时,glyphicon将移动到第一个屏幕截图的位置,.col-md-4或者.col-md-3它就像它不会紧贴在文本框旁边.

我也在这里查看了这个问题,但它对我没有帮助.

如何正确添加glyphicon？

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-blockBootstrap 的类,所以你也需要以下规则.

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