bootstrap 表单里面 label长度差距很大，怎么垂直对其

Posted 2023-04-27

参考技术A 本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容： 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本

未使用 thymeleaf 和 bootstrap 应用于验证表单的样式

【中文标题】未使用 thymeleaf 和 bootstrap 应用于验证表单的样式

【英文标题】：styles not applied on validation form using thymeleaf and bootstrap

【发布时间】：2018-09-19 10:48:31

【问题描述】：

尝试在引导表单中添加带有错误验证样式的文本

这是表格的一部分：

<label th:text="#name"
        class="col-form-label col-form-label-sm"></label> 
<input
        type="text" class="form-control form-control-sm"
        th:field="*name" /> 
<span
        th:if="$#fields.hasErrors('name')" th:errors="*name"
        th:class="invalid-feedback">Here there is an error</span>

我收到有关验证错误的消息，但没有样式。

如果我调试，我会看到具有以下样式的类：

<span class="invalid-feedback">Here there is an error</span>

我已经尝试过几种样式，例如 help-block 但没有办法。

我正在使用 bootstrap4.0.0-alpha.6

有什么想法吗？

谢谢

【问题讨论】：

您可以删除th:class中的th:。当涉及变量并且需要 Thymeleaf 对其进行评估时，您基本上需要使用 th:。

无论有无，该类均不适用。使用内联样式临时解决

【参考方案1】：

如果您仍然感兴趣。

Bootstrap's current validation docs 为您提供三种方法：客户端自定义验证、浏览器默认值和服务器端验证。

从您的帖子中，我假设您使用的是服务器端，这意味着您正在发送要在服务器代码中验证的数据，然后在重新呈现表单时显示错误字段。

在这种情况下，请记住，要启动引导程序的样式，您的代码需要特定的 html 结构，例如：

<input th:field ="*email" type="email" class="form-control"
        th:classappend="$not #lists.isEmpty(#fields.errors('email')) ? is-invalid"
        required>
<div class="invalid-feedback">
    <p th:each="error: $#fields.errors('email')" th:text="$error">Invalid data</p>
</div>

（我相信span 标签也适用于<div class="invalid-feedback">）

这是错误样式起作用的最小必要结构。会发生什么：

最初，invalid-feedback 被分配display: none 表单已提交，如果出现错误将重新呈现，由开发人员提供一种机制，该机制将在每个 class 属性中包含 is-invalid 并出现错误.在前面的代码中，th:classappend="$not #lists.isEmpty(#fields.errors('email')) ? is-invalid" 负责发生这种情况。 （我是 Spring 和 Thymeleaf 的新手，因此可能会有更简洁的代码） _forms.scss 中的声明 .form-control.is-invalid~.invalid-feedback 将启动并将 display: block 分配给 <div class="invalid-feedback">，从而显示每个字段的错误消息。李>

这应该足以在每个字段下显示错误并以红色突出显示它们。

嗨