jquery - Bootstrap 3：使用固定的网格布局显示错误消息

Question

我试图使用help-block类在字段下方显示必填字段错误消息。
这里最初看起来没有错误：jsfiddle
我遇到了网格布局问题：

感谢您告诉如何在徽章后放置帮助文本。但我的问题是保持网格完好无损。

问题： 如何保持网格布局完整？添加错误消息后，这就是它的外观。

我应该增加row身高吗？

前

后

Answer 1

您在输入和徽章之间插入帮助块，您可以这样做：

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

另外我建议您对水平表单（而不是多个.form-inline）使用适当的标记，阅读文档以获取更多信息

Answer 2

<div class="col-xs-6 col-sm-6 col-md-6 form-inline">
    <label class="pocLabel">EMail</label>
    <input type="text" name="MiddleName" class="form-control email">
    <span class="badge">P</span>
</div>

在您的小提琴中，您正在使用这段代码添加帮助文本：

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

其中 $(this) 是输入元素。 .after() 将在and<p>之间放置and 因为是一个块元素，所以它会在两者之间放置一个中断。<input><span><p>

你可以尝试这样的事情：

$(this).next().after('<span class="help-block">Example block-level help text here.</p>');