Simpleform 和 Boostrap 自定义包装器：内联单选按钮

Question

使用 Simple Form & Bootstrap，有没有办法在 span class="radio" 上添加一个类？ （使用自定义包装器或 wrapper_html ？）。我的目标是将所有单选按钮内联（但不是主标签“Vous êtes”）。

目标 =

祝你好运：

() 男人() 女人

here is the code (haml) in my view :

= simple_form_for @user  do |f|
 = f.input :gender, as: :radio_buttons, collection: [["Homme", 0], ["Femme", 1]]

here is the html generated code :

<div class="form-group radio_buttons required user_gender">
 <label class="control-label radio_buttons required">
   Vous êtes :
 </label>
 <input type="hidden" name="user[gender]" value="">
 <span class="radio">
   <label for="user_gender_0">
     <input class="radio_buttons required" type="radio" value="0" checked="checked" name="user[gender]" id="user_gender_0">
     Homme
   </label>
 </span>
 <span class="radio">
   <label for="user_gender_1">
     <input class="radio_buttons required" type="radio" value="1" name="user[gender]" id="user_gender_1">
     Femme
 </label>
 </span>
</div>

Answer 1

如果我正确理解您在寻找什么，您就不能在 CSS 中使用“显示块”吗？或者简单地将您的主标签包装在它自己的容器 div 中。

.control-label {
    display: block;
}