引导验证消息正在下推我的表单的其余部分

Posted 2023-03-06

【中文标题】引导验证消息正在下推我的表单的其余部分

【英文标题】：Bootstrap validation message is pushing down the rest of my form

【发布时间】：2017-03-06 12:23:23

【问题描述】：

我在CodePen 中创建了一个简单的表单。 name 字段上的 required 验证工作得很好。但是，我想在两个字段之间添加一点填充，并且在应该显示错误消息时...填充那个空白（意思是，出现错误消息的下面的字段不会被下推）。相反，它会不断向下推字段以为错误腾出空间。修复错误后，该字段被拉回。

我想要这样的东西：

我尝试设置.errorMessage 的位置，但这并没有改变。

.errorMessage
        position: relative;
        //position: absolute;  <--I've tried this, too
    

我做错了什么？

【问题讨论】：

所以即使错误不存在，您是否希望该空间保留错误？

是的。在我真正的解决方案中，错误文本会更小，因此差距不会太大（当错误不存在时看起来很奇怪）。我只是讨厌整个表单只是因为显示错误消息而移动。

【参考方案1】：

查看此代码笔：http://codepen.io/Sky-123/pen/QKoLEz

在 css 中做了一些小变通：

div.form-group
  margin-bottom:35px


div.has-error
 height:0px