脚手架CSS与Bootstrap CSS混合用于error_explanation / field_with_errors

Question

我一直在关注Michael Hartl的Ruby on Rails教程，以使Bootstrap表单验证工作，而不是内置的RoR样式。我的页面应该看起来像这样（通过检查器删除样式）：

相反，我得到：

我有以下custom.scss

＆＃13;

＆＃13;

 @import "bootstrap-sprockets";
 @import "bootstrap";

 #error_explanation {
     color: red;
     ul {
         color: red;
         margin: 0 0 30px 0;
     }
 }

 .field_with_errors {
     @extend .has-error;
 }

＆＃13;

＆＃13;

＆＃13;

这就是视图的样子：

＆＃13;

＆＃13;

<% if game.errors.any? %>
  <div id="error_explanation">
      <div class="alert alert-danger">
          <%= pluralize(game.errors.count, "error") %> prohibited this game from being saved:
      </div>
      <ul>
          <% @game.errors.full_messages.each do |msg| %>
              <li><%= msg %></li>
          <% end %>
      </ul>
  </div>

...

<div class="form-group">
<%= f.label :game_name, :class => "col-sm-2 control-label" %>
<div class="col-sm-10">
    <%= f.text_field(:game_name, {:class => "form-control"}) %>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已经尝试过让Bootstrap覆盖scaffold.scss的方法，所以我将下面显示的require custom放在我的application.css

中

＆＃13;

＆＃13;

*= require_tree .
*= require_self
*= require custom

＆＃13;

＆＃13;

＆＃13;

我在这类问题上看到的大部分SO问题都是Bootstrap类没有显示，因为他们当前版本的Bootstrap使用了错误的类，但这些类正在加载正确，只是旁边脚手架CSS。

Answer 1

Scaffolds样式表并没有真正覆盖您的自定义样式表。它为 #error_explanation 和 .field_with_errors 添加了额外的属性。

填充等属性：2px;背景颜色：红色;显示：表;等等 在一天结束时，资产管道将所有样式表连接在一起，从而导致您描述的问题。

如果您不需要保留脚手架样式表，只需转到 app / assets / stylesheets / 并删除 scaffolds.scss 。 但是，如果您希望保留脚手架样式表，则需要考虑手动编辑它，或者您可能希望为应用程序的不同部分呈现不同的布局。

.field_with_errors 定义也有一点点差异，Michael Hartl's tutorial中的定义如下：

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}