.field_with_errors混淆了引导风格的形式 [英] .field_with_errors messes up bootstrap styled form

问题描述

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

I have used bootstrap 3's grid system to layout a simple sign up form. However, if a validation in Rails fails, the added div with the class "field_with_errors" messes up my layout.

这是我的形式中的一行如何看起来像： / p>

Here's how a line in my form usually looks like:

<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>

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

When the validation fails the currently applied style looks like this:

<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>

我做了一些研究，据我所知，这是代码应该是这样： / p>

I did some research and as far as I understand, this is how the code should look like:

<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标签？

What I don't understand is how I can get application to add the additional class to the correct html tag?

任何帮助都是非常感激的！

Any help is appreciated!

推荐答案

'正确定义 field_with_errors 。在你的css中你应该有这样的代码：

You probably haven't defined field_with_errors properly. In your css you should have code like this:

.field_with_errors {
  @extend .has-error;
}

除此之外，你的应用程序的行为像它应该。你期望的代码（你的问题的第三个代码块）是不正确的，因为没有一个字段将被样式化为 field_with_errors -class。问题出在你的css文件。所以如果我的解决方案不工作，发布该文件。

Apart from that, your app behaves like it should. The code you expected (third code block of your question) is not correct, because none of the fields would be styled with field_with_errors-class. The problem lies in your css file. So if my solution doesn't work, post that file.

这篇关于.field_with_errors混淆了引导风格的形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！