css - Bootstrap 表单在验证时更改大小

Question

我是前端新手，所以我开始使用 Bootstrap “让我的生活更轻松(或更轻松)，但我在调整表单时遇到了一些麻烦

验证这些字段时，表单会更改大小，我该如何标准化这些大小？

已经尝试更改表单控件的 css，但没有成功

这里是表格中的一些图片

Forms Without validation

这里是验证时的表单

Forms with validation

代码:

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

Answer 1

你只需包装 @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 = "" })