jquery - Bootstrap3：修复行高

Question

固定行高是一个好习惯吗？
我正在尝试使用help-block类来动态显示错误消息，但是当我显示消息时，它会更改完整的网格布局。
jsfiddle
这就是网格在没有help-block消息的情况下出现的方式。在此处输入图像描述

当我点击提交时，它会检查必填字段是否为空。如果是，那么这就是它的外观。在此处输入图像描述

问题是错误消息是动态添加的，它会动态地改变行的高度。我该如何解决？

score 0 · Accepted Answer

无论如何，您为什么要在文本字段中显示这些消息？您已经在每个必填字段旁有红色 *。只需将错误消息一直添加到顶部（并确保页面向上滚动到错误），或者通过他们单击的按钮添加到底部。

而且由于您使用的是引导程序，因此您可以将 a 添加.has-error到有错误的输入字段中。那会解决你所有的问题。

出生日期的小提琴示例具有.has-error. http://jsfiddle.net/HgAVP/2/

不过，必须修复一些类以完全兼容 Bootstrap。

score 0 · Accepted Answer

固定行高是一个好习惯吗？

是的。

修复行高的一种方法是将以下 css 代码添加到该特定页面以超载基本 bootstrap.css

<style>
    .row{ height:50px;}/* change it to the resulting height after the dynamic change*/
</style>

不建议更改基础文件。

如果您有其他可能会更改的 ro 会受到此更改的影响。我建议为这些行添加一个额外的类

<style>
    .fixed-row{ height:50px;}
</style>

<div class="row fixed-row"><!-- your fields --></div>

2 回答 2