.fields_with_errors 的引导样式不起作用答案

【问题标题】：Bootstrap styling for .fields_with_errors not working.fields_with_errors 的引导样式不起作用
【发布时间】：2016-05-26 17:05:20
【问题描述】：

当表单提交并出现错误时：我希望在引导错误/警报样式中突出显示违规字段。开箱即用：Bootstrap 不会对应用于 rails 表单中的失败验证字段的常规 fields_with_errors 类进行样式设置。

过去per this question我只是简单地添加了这个：

.field_with_errors {
  @extend .has-error;
}

并且根据需要使用引导错误/警报样式突出显示有问题的表单字段。但是，这在我当前的 rails 项目中不起作用，我不确定我缺少什么。

我确定我遗漏了一些简单的东西：

#application.css.scss

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


.field_with_errors {
  @extend .has-error;
}

#relevant gems in Gemfile

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3', '>=3.3.6'
gem 'bootstrap-datepicker-rails', '~> 1.6', '>= 1.6.1.1'

提交前相关表单字段的 HTML（两个字段均未通过验证）：

<div class="form-group">
  <label for="expense_duration_start_date">Start Date</label><br>
  <input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" />
</div>

<div class="form-group">
  <label for="expense_duration_end_date">End Date</label><br>
  <input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" />
</div>

表单提交后表单域的 HTML：

<div class="form-group">
  <div class="field_with_errors"><label for="expense_duration_start_date">Start Date</label></div><br>
  <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /></div>
</div>

<div class="form-group">
  <div class="field_with_errors"><label for="expense_duration_end_date">End Date</label></div><br>
  <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /></div>
</div>

所以.field_with_errors 类正在被应用，但它只是没有被设置样式，我不知道为什么@extend .has-error; 的css 不起作用。我该如何解决这个问题？

【问题讨论】：

标签： css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

下面的解决方案。最重要的是确保包括所有相关的课程。具体来说：form-group 类、control-label 类和form-control 类：

<div class="row">
  <div class="form-group col-sm-2">
    <%= f.label :start_date, "Start Date", class: "control-label" %><br>
    <%= f.text_field :start_date, data: {provide: 'datepicker'}, class: "form-control" %>
  </div>
</div>

<div class="row">
  <div class="form-group col-sm-2">
     <%= f.label :end_date, "End Date", class: "control-label" %><br>
    <%= f.text_field :end_date, data: {provide: 'datepicker'}, class: "form-control" %>
  </div>
</div>

【讨论】：