Ruby on Rails和引導，使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 %> 

在正常狀態下顯示水平，它看起來不錯

但如果看起來像是這樣

並且由於使用的是形狀內聯的，和DIV顯示爲一個塊默認生成

<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

的HTML代碼。嘗試

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

    display: inline-block; 
} 

Answer 2

注意與引導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。