Question

确定。我无法弄清楚这一点。问题是@extend无法在css中运行。我有css：

@import "bootstrap";

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

它不会突出显示包含div class .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类名引起的。类名已更改（看看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>

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

根据3.x升级代码应该可以正常工作

.field_with_errors {
  @extend .has-error;
}

Answer 4

此错误导致因为在application.scss中有以下行

*= require_tree .

它放在 @import＆＃34; bootstrap＆＃34; 之前。

因此， _custom.scss 已包含在Bootstrap之前。

Answer 5

我明白了。这与Twitter-Bootstrap有关，它有一个类.alert。这是负责显示正确样式错误的类。 Bootstrap安装谁知道哪里，并且最容易通过浏览器中的开发人员工具访问（这很糟糕）。我找不到宝石的来源位置（它指向我不是文件夹的文件夹）。所以我将来自github的twitter css文件直接复制到我的应用程序中 - ＆gt;供应商/资产/样式表。现在我可以解决这个问题了。我在一个引导程序文件（_alerts.scss）中更改了.alert类的样式，并在我的custom.css.scss文件中添加了额外的类，以便在错误时使输入边框变为红色。不知怎的，这一切在我以前的应用程序中运行得更好，我认为这与他们对引导程序所做的更改有关，可能与我使用bootstrap的原始设计（如全宽标题）相混淆。导致我解决问题的最重要的事情是，我认为课程是.alert而不是.error。也非常感谢浏览器开发人员工具，没有你我找不到我的文件。

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

Answer 6

解决问题的最简单方法 - 对我有用的 - 是为这两个类添加!optional：

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

Answer 7

好的，在追查这个问题几天后，我发现了问题所在。

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

@import 'bootstrap';

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

Ruby field_with_errors不会@extend .control-group .error

7 个答案: