css - 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 中(您可能正在重用 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>