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

正如'汤'的评论指出的那样,问题是由安装Bootstrap 3然后调用Bootstrap 2类名引起的.类名已经改变(看看这里).正确的代码是:

.field_with_errors {
  @extend .has-error;
}

因此必须包含错误消息(也请看这里):

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>

Answer 2

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

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