simple_form_for rails单选按钮内联

tre*_*065 22 css forms ruby-on-rails simple-form twitter-bootstrap

我试图让我的按钮显示内联,并具有默认值,因为它不能为空.我正在使用plataformatex/simple_form和bootstrap.

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true
Run Code Online (Sandbox Code Playgroud)

它呈现这个:

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>
Run Code Online (Sandbox Code Playgroud)

很明显,style:它不能正常工作,但我不确定它会起作用.

继另一个建议后,我补充道

.radio_buttons { display:inline; }

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true
Run Code Online (Sandbox Code Playgroud)

得到了:

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>
Run Code Online (Sandbox Code Playgroud)

只是另一个注意,默认值仍然无法正常工作.

fly*_*ish 55

如果您希望它们内联,您需要通过执行以下操作为标签提供内联类: :item_wrapper_class => 'inline'

以下是使用您的代码的示例:

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true
Run Code Online (Sandbox Code Playgroud)

编辑:我刚刚意识到我的答案更具体到simple_form + bootstrap,因为bootstrap在给标签的内联类时已经定义了样式.您应该能够使用我的示例,在创建自定义CSS时,您需要完成更多工作.