simple_form_for rails单选按钮内联

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

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true 

它呈现这个：

   Private    Public  

很明显， style:工作不正常，但我不确定会起作用。

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

 .radio_buttons { display:inline; } = f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true 

得到了：

   Private    Public  

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

Answer 1

如果你想让它们内联，你需要通过执行以下操作为标签提供内联类: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 

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

Answer 2

你可以试试

 f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true 

不太确定您使用哪种gem作为简单forms，但这是您可以尝试的来源或参考

 collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block) 

Answer 3

使用带有Bootstrap 3的Simple Form，您可以使用radio类以及item_wrapper_class和item_wrapper_tag选项。

 = f.collection_radio_buttons :sort, [[foo,bar],[foo,bar], :first, :last, item_wrapper_class: :radio, item_wrapper_tag: :div 

Answer 4

上面的答案可能没有用，因为我没有使用Bootstrap。 但还有其他方法。 我在按钮周围打了一个带有class =“radio-buttons”的div并手动标记。 然后我把它添加到我的样式表（SASS）：

 .radio-buttons { margin: .5em 0; span input { float: left; margin-right: .25em; margin-top: -.25em; } #this grabs the MAIN label only for my radio buttons #since the data type for the table column is string--yours may be different label.string { margin-bottom: .5em !important; } clear: both; } .form-block { clear: both; margin-top: .5em; } .radio-buttons span { clear: both; display:block; } 

这将使所有框架上的单选按钮内联，尽管这被调整为Zurb Foundation的最佳选择。 ;）

Answer 5

简单的解决方案：

将类添加到项目包装器 。 这个课程可以是你选择的任何一个。 我在下面的例子中使用’inline’：

 form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'} 

然后定义一些仅适用于单选按钮组的CSS （只有实际的单选按钮，而不是项目标签）：

 input.radio_buttons.inline label.radio{ display: inline-block; } 

以下是这个产生的例子：

Answer 6

只为那些使用zurb基础与简单forms的chekbox的人来到这里：

苗条视图：

 = f.input :company_stages, as: :check_boxes, required: true 

SCSS：

 // simple-form checbox .checkbox { margin-right: 20px; display: inline-block; }