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）在 Bootstrap 之上附带了其他样式，可在 Site.css 中找到，它静态设置输入字段的最大值。

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

执行此操作后，您的表单字段将超长。为了解决这个问题，我将col-md-10 更改为更短的名称，例如col-md-4，效果很好。