Bootstrap窗体在验证时更改大小
Bootstrap窗体在验证时更改大小
提问于 2018-08-28 23:03:50
我对前端是个新手，所以我开始用bootstrap来让我的生活更容易(或不容易)，但我在调整表单时遇到了一些麻烦
在验证这些字段时，表单更改了大小，我如何标准化这些大小？
已尝试更改表单控件的css，但未成功
下面是表单中的一些图像
下面是经过验证的表单
代码：
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Barco.Nome, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.SapId, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.SapId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.SapId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.CapacidadeAgua, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.CapacidadeAgua, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.CapacidadeAgua, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.CapacidadeOleo, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.CapacidadeOleo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.CapacidadeOleo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.Velocidade, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.Velocidade, new { htmlAttributes = new { @class = "form-control " } })
@Html.ValidationMessageFor(model => model.Barco.Velocidade, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.Setor, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.Setor, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.Setor, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Barco.Setor, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.Setor, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Barco.Setor, "", new { @class = "text-danger" })
</div>
</div>
@Html.Partial("_ClasseBarco")
<div class="form-group">
<div class=" col-md-12 col-md-12">
<input type="submit" value="Adicionar" class="btn btn-success" />
<a href="@Url.Action("Index","Barcos")" class="btn btn-default">Voltar </a>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2018-08-29 03:28:28
只需将@Html.ValidationMessageFor()标记包装在<div>中即可获得对样式的完全控制：
<div class="col-md-12">
@Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
<div class="validation-style">
@Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
</div>
</div>并在css文件中创建自己的样式：
.validation-style {
font-size: 14px !important;
// color, font-weight, margin-top, padding-left, etc. :-)
}如果您不喜欢text-danger，只需将其删除并在validation-style中定义所有样式即可。
@Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "" })页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52061025
复制相关文章
相似问题