Ruby field_with_errors 不 @extend .control-group .error

Question

好的。我想不通。问题是 @extend 在 css 中不起作用。我有css：

@import "bootstrap";

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

它不会突出显示具有 div 类 .field_with_errors 的字段。我不知道为什么，它适用于我制作的其他应用程序。如果我用 CSS 编写类似 color: #f00; 的东西 - 这很有效。出于某种原因，它只是不@extend。有什么想法吗？

表格：

<h1>Report</h1>
<div class="row">
   <div class="span6 offset3">
    <%= form_for(@problem) do |f| %>
      <%= render 'shared/error_messages' %>

      <%= f.label :name, raw("Your name:") %>
      <%= f.text_field :name %>

      <%= f.label :email, raw("E-mail address (for confirmation):") %>
      <%= f.text_field :email %>

      <%= f.label :description, raw("Enter a description of the problem:") %>
      <%= f.text_area :description %>

      <%= f.submit "Submit", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>

可能是一个愚蠢的问题，我一定错过了什么。我只是不知道它是什么，并且真的希望它像以前一样工作。任何帮助表示赞赏！

编辑： 在查看了 bootstrap-sass 文件后，我意识到我能够@extend 文件中的类（例如@extend .form-control 有效）。所以一定是.error和.control-group不存在！！它去了哪里，我仍然无法弄清楚，除非他们像一周前那样改变它。 ：/

Answer 1

正如“soup”的评论所指出的，问题是由安装 Bootstrap 3 然后调用 Bootstrap 2 类名引起的。类名已经改变（看看here）。正确的代码是：

.field_with_errors {
  @extend .has-error;
}

因此必须将错误消息包装在其中（另请参阅here）：

div class="alert alert-danger"

因此，在您的 app\views\shared\_error_messages.html.erb-partial（您可能正在重用 Michael Hartl 的 Rails 教程中的代码）中，将 div class="alert alert-error" 更改为 div class="alert alert-danger"。因为你的代码太远了，我给你一个适应 Bootstrap 3 的版本：

<h1>Report</h1>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <%= form_for(@problem) do |f| %>
        <%= render 'shared/error_messages' %>
          <div class="form-group">
            <%= f.label :name, raw("Your name:") %>
            <%= f.text_field :name, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :email, raw("E-mail address (for confirmation):") %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :description, raw("Enter a description of the problem:") %>
            <%= f.text_area :description, class: 'form-control' %>
          </div>
        <%= f.submit "Submit", class: "btn btn-lg btn-primary" %>
      <% end %>
    </div>
  </div>

Answer 2

如果有人因为它不能与 LESS 一起工作而使用它（就像我一样），我必须这样做：

.field_with_errors .form-control {
  &:extend(.has-error .form-control);
}

.field_with_errors .form-control:focus {
  &:extend(.has-error .form-control:focus);
}

当我尝试使用时：

.field_with_errors {
  &:extend(.has-error);
}

这相当于我发现使用 bootstrap 3 样式来解决错误的推荐方式，LESS 没有做任何事情。这可能与 bootstrap 3 中提到 has-error 的选择器总是将其与其他内容结合在一起这一事实有关，例如：

.has-error .form-control {

无论如何 - 上述解决方案对我有用，所以希望它可以帮助其他人。

Answer 3

我想通了。这与 Twitter-Bootstrap 相关，其中有一个 .alert 类。那是负责以正确样式显示错误的类。 Bootstrap 安装谁知道在哪里并且最容易通过浏览器中的开发人员工具访问（这很糟糕）。我找不到 gem 的来源（它指向不是文件夹的文件夹）。所以我将 twitter css 文件从 github 直接复制到我的应用程序 -> vendor/assets/stylesheets 中。现在我可以处理这个问题了。 我在其中一个引导文件 (_alerts.scss) 中更改了 .alert 类的样式，并在我的 custom.css.scss 文件中添加了额外的类，以使输入周围的边框在错误时变为红色。 不知何故，这整件事在我以前制作的应用程序中效果更好，我认为这与他们对引导程序所做的更改有关，并且可能与我弄乱引导程序的原始设计（如全角标题）有关。 让我找到解决方案的最重要的事情是课程是.alert，而不是我想的.error。也非常感谢浏览器开发工具，没有你我找不到我的文件。

编辑： 这是在 Bootstrap 上获取文件的下载说明： http://getbootstrap.com/getting-started/#download

Answer 4

按照 3.x 升级您的代码应该可以工作

.field_with_errors {
  @extend .has-error;
}

Answer 5

这个错误是因为在 application.scss 中有下面一行

*= require_tree .

它被放置在@import "bootstrap"之前。

所以，_custom.scss 已经在 Bootstrap 之前被包含了。

Answer 6

修复它的最简单方法（对我有用的方法）是将!optional 添加到两个类中：

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

Answer 7

好的，在追了几天这个问题后，我弄清楚了问题所在。

您需要在 custom.css.scss 文件的顶部包含引导程序。

@import 'bootstrap';

我的猜测是这包括自定义文件中的所有类，以便您以后可以引用它们。我假设如果您使用一些引导 gem，它将使它们在全球范围内可用，但如果您像我一样使用香草，那么您需要使用上面的代码。