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 - 类进行样式设置。问题出在你的css文件中。因此，如果我的解决方案不起作用，请发布该文件。

.field_with_errors混淆了引导程式的表单

1 个答案: