Question

我是前端的新手，所以我要从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>

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 = "" })

Bootstrap表单在验证后会改变大小

1 个答案: