Simple Form复选框样式问题：多对多关联表单样式未生效

你的问题出在自定义label块破坏了Simple Form的默认样式结构，同时wrapper参数的位置不对。下面提供两种可靠的解决方案：

方案一：使用label_method传入翻译逻辑（推荐） #

直接在f.input中通过label_method指定动态翻译的lambda，无需自定义label块，既能保留Bootstrap样式，又实现翻译：

<%= f.input :feature_ids, 
            as: :check_boxes, 
            collection: Feature.order(:name), 
            wrapper: :vertical_collection_inline,
            label_method: ->(feature) { t(feature.name) } %>

原理：label_method支持接收lambda表达式，动态返回每个Feature的翻译名称，Simple Form会自动按配置的wrapper生成带Bootstrap类的结构。

方案二：保留自定义label块同时修复样式 #

如果必须保留自定义label的写法，需要把wrapper参数放在外层f.input上，并且手动添加Bootstrap样式类：

<%= f.input :feature_ids, as: :check_boxes, wrapper: :vertical_collection_inline do %>
  <%= f.collection_check_boxes :feature_ids, Feature.order(:name), :id, :name do |b| %>
    <%= b.label class: 'form-check-label' do %>
      <%= b.check_box class: 'form-check-input' %>
      <%= t(b.text) %>
    <% end %>
  <% end %>
<% end %>

自定义label块时，Simple Form不会自动注入Bootstrap的样式类，所以需要手动添加form-check-input和form-check-label来保证样式生效。

原写法失效原因 #

1. wrapper: :vertical_collection_inline应该传给外层的f.input，内部的collection_check_boxes不识别这个参数；
2. 直接拼接HTML的写法（b.check_box + " " + t("#{b.text}")）破坏了Simple Form生成的DOM结构，导致Bootstrap样式无法正确应用。

内容的提问来源于stack exchange，提问作者Gogamar