css - .field_with_errors 弄乱了 Bootstrap 样式的表单

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 文件中。因此，如果我的解决方案不起作用，请发布该文件。