Bootstrap3：修复行高答案

【问题标题】：Bootstrap3: Fix the row heightBootstrap3：修复行高
【发布时间】：2013-10-09 03:52:11
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

恕我直言，这将是糟糕的用户体验。在大表单中，用户不知道需要修复哪个字段。
我看不出以红色突出显示字段与通过这些字段添加文本消息有何不同。需要详细说明吗？
在出生日期字段上添加了一个带有.has-error 的小提琴以显示示例...我不明白这是多么糟糕的用户体验。 jsfiddle.net/HgAVP/2 编辑：我确实必须修复他的一些代码......