10

行。我想不通。问题是@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不存在！它去了哪里，我仍然无法弄清楚，除非他们像一周前那样改变它。：/

4

7 回答 7

24

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

.field_with_errors {
  @extend .has-error;
}

因此，错误消息必须包含在（也看这里）：

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>
于 2014-01-07T17:14:33.083 回答
3

万一有人因为它不适用于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 {

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

于 2014-02-05T14:55:41.060 回答
1

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

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

于 2013-12-20T15:38:53.963 回答
1

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

.field_with_errors {
  @extend .has-error;
}
于 2014-08-08T21:18:24.710 回答
1

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

*= require_tree .

并将其放在@import "bootstrap"之前。

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

于 2015-07-27T15:16:18.627 回答
-1

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

.field_with_errors {
  @extend .control-group !optional;
  @extend .error !optional;
}
于 2014-06-12T22:41:15.880 回答
-1

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

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

@import 'bootstrap';

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

于 2015-04-02T01:29:46.977 回答