Bootstrap3：修正行高

Question

固定行高是一个好习惯吗？我正在尝试使用help-block类动态显示错误消息，但是当我显示消息时它会更改完整的网格布局。<登记/> jsfiddle
这就是网格出现时没有help-block消息的方式。

当我点击提交时，它会检查必填字段是否为空。如果是那么这就是它出现的方式。

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

Answer 1

  

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

是的。

修复行高的一种方法是将以下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>

Answer 2

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

由于您使用的是bootstrap，因此可以在有错误的输入字段中添加.has-error。这将解决你所有的问题。

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

但是，必须修复一些类才能完全兼容Bootstrap。