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时，它会与框重叠：

当我调整浏览器的宽度时，更多的是，当我使用.col-md-4或.col-md-3时，glyphicon将移动到第1个屏幕截图的位置，它＆＃39;就像它不会粘在文本框旁边。

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

如何正确添加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还会破坏Bootstrap的.form-block类，因此您还需要以下规则。

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

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

MVC5在EditorFor旁边添加glyphicon

2 个答案: