.field_with_errors 弄乱了引导样式的表单

Question

我使用 bootstrap 3 的网格系统来布置一个简单的注册表单。但是，如果 Rails 中的验证失败，添加的带有“field_with_errors”类的 div 会打乱我的布局。

我的表单中的一行通常如下所示：

<div class="form-group">
    <label class="col-xs-2 control-label" for="user_secondary_email">Secondary email</label>
    <div class="col-xs-4">
    <input class="form-control" id="user_secondary_email" name="user[secondary_email]" type="text" />
    </div>
</div>

当验证失败时，当前应用的样式如下所示：

<div class="form-group">
    <div class="field_with_errors"><label class="col-xs-2 control-label" for="user_primary_email">Primary email</label></div>
    <div class="col-xs-4">
        <div class="field_with_errors"><input class="form-control" id="user_primary_email" name="user[primary_email]" type="text" value="" /></div>
    </div>
</div>

我做了一些研究，据我了解，代码应该是这样的：

<div class="form-group has-error">
        <label class="col-xs-2 control-label" for="user_secondary_number">Secondary number</label>
        <div class="col-xs-4">
            <input class="form-control" id="user_secondary_number" name="user[secondary_number]" type="text" />
        </div>
   </div>

我不明白的是如何让应用程序将附加类添加到正确的 html 标记中？

感谢任何帮助！

Answer 1

您可能没有正确定义field_with_errors。在你的 CSS 中，你应该有这样的代码：

.field_with_errors {
  @extend .has-error;
}

除此之外，您的应用程序的行为也应如此。您期望的代码（您问题的第三个代码块）不正确，因为没有一个字段将使用field_with_errors-class 设置样式。问题出在您的 css 文件中。因此，如果我的解决方案不起作用，请发布该文件。