使用 Bootstrap 3 进行 Sass/Rails 表单验证

Question

我有一个表格，当它没有正确填写时，Rails 将它包装在一个“field_with_errors”类中。我有一个 css.scss 文件，我在其中导入 Bootstrap，我想扩展 field_with_errors 以使用 Bootstrap 3 的表单验证样式。我找到了这个

.field_with_errors {
    @extend .control-group;
    @extend .error;
}

但它不起作用，所以我发现这些类是 Bootstrap 2 类。所以我找到了它们的等价物：

.field_with_errors {
    @extend .form-group;
    @extend .has-error;
}

但这似乎没有任何效果。我对 Rails 和 Sass 完全陌生，有人可以给我指点吗？

Answer 1

好吧，我是一个大的引导新手，但我发现了问题。以下是引导源代码中对 has-error 的所有引用

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;

如您所见，没有简单的 .has-error 样式。我想我可以将它应用到由 rails 生成的类中，然后继续我的生活。事实证明，您仍然必须使用正确的 form-control 、 control-label 类命名组件。但是在你这样做之后，我的代码适用于带有 rails 4 的 bootstrap 3。希望这对其他人有帮助。

另外，我想出了这种丑陋的方法来让它与你的基本 ruby​​ formhelper 表单一起工作。它不是 DRY 或其他任何东西，但它不那么麻烦。

在 custom.css.scss 或任何你做 css 样式的地方：

.field_with_errors {

  input{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }
  label {
    color: #a94442;
  }
}

Answer 2

你可以使用这个sn-p：

.field-with-errors { @extend .has-error; }