使用输入组附加包装错误标签和Jquery Validate的Bootstrap 3表单 [英] Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate

问题描述

将Bootstrap 3与水平表单一起使用，并将表单组和输入组标签与Jquery-Validate一起使用.当Jquery.Validate运行时出现错误时，它将在输入组内附加一个标签错误控件.

Using Bootstrap 3 with a form-horizontal using form-group and input-group tags with Jquery-Validate. When Jquery.Validate runs for errors, it appends a label error control within the input-group.

问题是，当Jquery Validate添加标签错误控件时，input-group-addon会包装到form字段下方的下一行.

The issue is that input-group-addon wraps to the next line underneath the form field when the label error control is added by Jquery Validate.

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

如何获取标签错误以保留在表单控件中，并且不将输入组附加组件包装到下一行?

How do I get the label error to stay under the form control and not wrap the input-group-addon to the next line?

是的，我知道此解决方案-效果很好，但仍然没有将错误标签列为水平表格: 带有jQuery验证插件的Bootstrap 3

Yes, I am aware of this solution - works great, but still doesn't line up the error label for form-horizontal: Bootstrap 3 with jQuery Validation Plugin

推荐答案

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

The simplest way to solve your problem should be to put your error label with absolute position property in css. In your example here's the result :

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


}

这篇关于使用输入组附加包装错误标签和Jquery Validate的Bootstrap 3表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！