ruby on rails和bootstrap，使field_with_errors显示为水平

Question

<{1>}文件中的

custom.css.scss

和html.erb

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

}

在正常状态下，它看起来很不错

但如果发生了错误，它看起来像这样

及其生成的html代码

<%= form_for @timecard , url:{action: "savecard"},html:{class: "form-inline"} do |f| %>
    <%= f.label :"Date"%>
    <%= f.date_select :starttime ,{use_month_numbers: true }, class: "input-small" %>
    <%= f.label :"Hours"%>
    <%= f.number_field :hours, class: "input-small" %>
    <%= f.label :"Project"%>
    <% projects = Project.all.map { |project| [project.name, project.charge_number]  } %>
    <%= f.select :charge_number, options_for_select(projects) ,{},class: "input-small" , style:"width:150px"%>
    <%= f.submit "Save", class: "btn" %>
    <%= f.submit "Delete", class: "btn" %>
    <%= f.submit "Submit", class: "btn btn-danger",confirm:"You can't edit it agin if you've submitted it" %>
<% end %>

Answer 1

因为您使用的是form-inline，而div显示为块默认值。试试

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

    display: inline-block;
}

Answer 2

请注意，使用Bootstrap 3 names have changed

.field_with_errors {
  @extend .has-error;
  display: inline-block;
}

Answer 3

我最终使用了以下内容：

.field_with_errors {
  @extend .has-error;
}

.form-inline .field_with_errors {
  display: inline-block;
}

这扩展了所有表单的.has-error Bootstrap类，如果使用的表单是内联表单（。form-inline），则会将.field_with_errors显示为inline-block。< / p>