jquery - Bootstrap 3 : Show the error message with fixed Grid Layout

Question

我尝试使用 help-block 类在字段下方显示必填字段错误消息。
这是它最初看起来没有错误的样子:jsfiddle
我对网格布局有疑问:

Thanks for telling how put help text after the badge. But my issue keeping the grid intact.

问题: 如何保持网格布局完整？添加错误消息后就是它的样子。

Should I increase the row height?

之前

之后

Answer 1

您要在输入和徽章之间插入帮助 block ，您可以改为这样做:

$(this).closest('div').append("<p class='help-block'>Example block-level help text here.</p>");

我还建议您对水平表单使用适当的标记(而不是多个 .form-inline)，阅读 the docs了解更多信息