将f.collection_check_boxes的复选框与Simple_Form对齐

我正在使用RoR，我正在使用Simple_Form gem来表示我的表单。 我有一个对象关系，用户可以拥有多个角色，在创建过程中，管理员可以选择要应用于新用户的角色。 我希望Roles的左边是复选框，右边的名字是水平排列。

//“box”Admin //

而不是当前

//

“框”

管理员

//

我目前显示角色的代码是这样的。

我最感兴趣的部分是f.collection_check_boxes生成这样的代码。

   blah  

这让我很难在那里获得一个css类，因为有三个组件需要触及。 我已经尝试将诸如虚拟类之类的东西添加到：html哈希，但虚拟类甚至没有出现在渲染的html中。

任何帮助是极大的赞赏

编辑：解决方案

感谢Baldrick，我的工作erb看起来像这样。

  'checkbox_container'} %> 

我的CSS如下

 .checkbox_container { display: inline-block; vertical-align: -1px; margin: 5px; } .checkbox_container input { display: inline; } .checkbox_container .collection_check_boxes{ display: inline; vertical-align: -5px; } 

Answer 1

根据collection_check_boxes的文档 ，有一个选项item_wrapper_class为包含复选框的范围提供css类。 像这样使用它

 <%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %> 

还有一种CSS样式，可以将复选框和标签保持在同一行：

 .checkbox_container input { display: inline; } 

Answer 2

在带有bootstrap-saas的2.3.1.0的SimpleForm的最新2.1.0分支中，安装了bootstrap选项，collection_check_boxes方法产生了一些跨度，应用内联项包装器类没有任何好的效果。

我能够使用标准输入集合来完美地排列表格：as =>：check_boxes方法。 然后内联样式完美地工作：

 <%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline' %> 

我的角色碰巧是一个带有value，label的简单数组。 希望这可以帮助。

Answer 3

使用Bootstrap，您可以：

 <%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %> 

Answer 4

这是使用’rails collection_check_boxes bootstrap’进行DDG搜索的第一个SO页面，但它不是关于Bootstrap，但这里是Bootstrap 4的解决方案。

这适用于普通的Rails和Bootstrap 4，不需要gem。 collection_check_boxes是一个普通的Rails方法。

  .form-group =f.label :industry_interest %br =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb| =cb.check_box =cb.label %br 

要么

  .form-group =f.label :industry_interest =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb| .form-check =cb.label class: 'form-check-label' do =cb.check_box class: 'form-check-input' =cb.text 

他们看起来很相似

https://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios