Bootstrap 3 input-group-addon后缀未附加到表单字段

Question

使用Bootstrap 3作为C＃ASP.NET MVC5项目的一部分。

尝试使用input-group-addon为表单字段添加“GB”后缀时，我遇到了一个非常奇怪的问题。

这是C＃：

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.capacity, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="input-group">
                    @Html.TextBoxFor(model => model.capacity, new { @class = "form-control" })
                    <span class="input-group-addon">GB</span>
                </div>
                @Html.ValidationMessageFor(model => model.capacity)
            </div>
        </div>
    </div>

}

等同于：

    <form action="/NewSpaceRequest/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="tP5XKKhflSS8K1e7q1I_ZSuR8Ty7X88FfuOMG5JhmF-KXtUOcn4SQdNGTMZZVC2pdBMjb7RgNrIB90Y9I5C_FgX9xmMLrwrbiFZde7PRZ13gCqjBDAVglM38T7j09-C-uNkRSCZbFqDgiU_XcH9D-w2" />
<div class="form-horizontal">
            <hr />

            <div class="form-group">
                <label class="control-label col-md-2" for="capacity">Capacity</label>
                <div class="col-md-10">
                    <div class="input-group">
                        <input class="form-control" data-val="true" data-val-number="The field Capacity must be a number." data-val-range="The field Capacity must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="The Capacity field is required." id="capacity" name="capacity" type="text" value="" />
                        <span class="input-group-addon">GB</span>
                    </div>
                    <span class="field-validation-valid" data-valmsg-for="capacity" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>
    </form>

注意后缀是如何“拉到”表单字段的？

不确定原因。

Answer 1

框架堆栈（ASP.NET，MVC5）在Sitestss中找到了Bootstrap之外的其他样式，它们静态地设置了输入字段的最大值。

您可以安全地删除整个条目。

执行此操作后，您的表单字段将超长。为了解决这个问题，我将col-md-10更改为更短的内容，例如col-md-4，这是一种享受。