使用带有Jquery Validate的input-group-addon包装错误标签的Bootstrap 3表单

Question

使用带有表单组的Bootstrap 3和使用带有Jquery-Validate的表组和输入组标签.当Jquery.Validate运行错误时,它会在输入组中附加标签错误控件.

问题是当Jquery Validate添加标签错误控件时,input-group-addon将换行到表单字段下面的下一行.

查看:http: //www.bootply.com/114554

如何让标签错误保持在表单控件之下,而不是将input-group-addon包装到下一行？

是的,我知道这个解决方案 - 效果很好,但仍然没有为form-horizo​​ntal 排序错误标签: 使用jQuery Validation Plugin启动3

Answer 1

解决问题的最简单方法是将带有绝对位置属性的错误标签放在CSS中。在您的示例中，结果如下：

.text-danger {
    color: #a94442;
    position: absolute;
    width: 100%;
    top: 34px;
    line-height: 34px;
    left: 0px;


}

Answer 2

另一种解决方法：http : //www.bootply.com/2liEuyqrAb

必须将标签移到输入组之外。完成此操作后，请执行预期的行为：窗体标签向左，字段向右，字段下错误。