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