Rails 4 app with Bootstrap 3
I have a form that includes inputs from switches:
<strong> Radio button options on form </strong><br>
<div class="form-group">
 <%= f.radio_button :category, 'A' %>   <%= f.label "A", "A" %><br />
 <%= f.radio_button :category, 'B' %>   <%= f.label "B", "B" %><br />
 <%= f.radio_button :category, 'C' %>   <%= f.label "C", "C" %><br />
</div>
When you first load the form, everything looks right:

My problem is that if the form fails due to a validation error (there is no required input, etc. anywhere on the form), when the page is re-displayed, the switch and label are displayed on two different lines:

How to fix this problem?
Update
Generated HTML for each: Original (correct):
<strong> Radio button options on form </strong><br>
<div class="form-group">
 <input id="listing_category_1" name="listing[category]" type="radio" value="1" />   <label for="listing_1">A</label><br />
 <input id="listing_category_2" name="listing[category]" type="radio" value="2" />   <label for="listing_2">B</label><br />
 <input id="listing_category_3" name="listing[category]" type="radio" value="3" />   <label for="listing_3">C</label><br />
</div>
And for re-rendering (wrong):
<strong> Radio button options on form </strong><br>
<div class="form-group">
 <div class="field_with_errors"><input id="listing_category_1" name="listing[category]" type="radio" value="1" /></div>   <label for="listing_1">A</label><br />
 <div class="field_with_errors"><input id="listing_category_2" name="listing[category]" type="radio" value="2" /></div>   <label for="listing_2">B</label><br />
 <div class="field_with_errors"><input id="listing_category_3" name="listing[category]" type="radio" value="3" /></div>   <label for="listing_3">C</label><br />
</div>
source
share