MVC5 在 EditorFor 旁边添加 glyphicon答案

【问题标题】：MVC5 Adding glyphicon next to EditorForMVC5 在 EditorFor 旁边添加 glyphicon
【发布时间】：2016-10-11 02:26:35
【问题描述】：

这让我有点发疯了，将所需的宽度调整为我在 EditorFor 文本框旁边添加的字形图标。

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

    <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-md-3 时，字形图标只会移动到第一个屏幕截图的位置，就像它不会粘在文本框旁边一样。

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

如何正确添加字形图标？

【问题讨论】：

您使用的是默认的 ASP.NET MVC 项目模板吗？它有一个导致此问题的 CSS 规则。
是的，我不知道是哪一个。
非常感谢@Tasos，你的评论让我在网上找到了一个想法，我在这里找到了它：roastlambda.wordpress.com/2014/08/29/…
呵呵，刚刚发布了一个答案！检查类似问题的修复..
欣然接受它作为答案:)

标签： css asp.net-mvc twitter-bootstrap asp.net-mvc-5

【解决方案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 也破坏了 Bootstrap 的 .form-block 类，因此您还需要以下规则。

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

【讨论】：

我刚刚发现最好像这样分离 .input-group .input-group { max-width: 350px;这将允许文本框的宽度与文本框的其余部分保持一致。

【解决方案2】：

不需要 CS。这是我项目中的部分代码

<div class="form-group">
@Html.LabelFor(model => model.scheduledDate, htmlAttributes: new { @class = "control-label col-md-12" })
<div class="col-md-12">
    <div  class='input-group date' id='myDatepicker'>
        @Html.EditorFor(model => model.scheduledDate, new { htmlAttributes = new { @class = "form-control"} })
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    @Html.ValidationMessageFor(model => model.scheduledDate, "", new { @class = "text-danger" })
</div>

并且将日期限制在现在的时间和日期之后

<script>
$('#myDatepicker').datetimepicker({
    format: 'DD.MM.YYYY HH:mm',
    minDate: 'now'
});</script>

【讨论】：