使用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>
注意后缀是如何“拉到”表单字段的?
不确定原因。
答案 0 :(得分:5)
框架堆栈(ASP.NET,MVC5)在Sitestss中找到了Bootstrap之外的其他样式,它们静态地设置了输入字段的最大值。
您可以安全地删除整个条目。
执行此操作后,您的表单字段将超长。为了解决这个问题,我将col-md-10
更改为更短的内容,例如col-md-4
,这是一种享受。