ruby-on-rails - ruby on rails と bootstrap 、 field_with_errors を横表示にする

Question

custom.css.scssファイル内

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

}

と html.erb

<%= 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 %>

通常の状態では、見栄えがします

しかし、何か問題が発生した場合は、次のようになります

そしてそれが生成したhtmlコード

<label for="time_card_Hours">Hours</label>
    <div class="field_with_errors"><input class="input-small" id="time_card_hours" name="time_card[hours]" type="number" /></div>
    <label for="time_card_Project">Project</label>

Answer 1

Bootstrap 3 では名前が変更されていることに注意してください

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