如何使用带有collection_check_boxes的form_for插入新的换行符

Question

我在代码中的某一点使用以下form_for来显示一系列主题供用户选择。

 <%= form_for @user do |f| %> 
 <%= f.collection_check_boxes(:topic_ids, Topic.all.sample(50).each, :id, :topic_name) %> 
 <%= f.submit %>
 <% end %>

当它在页面上呈现时，这些框都是一个接一个的。如何将它们分开以便每行有一个复选框？

Answer 1

来自reference here可能通过给出方法块来定制元素的显示方式，如上面的代码中的示例

<%= form_for @user do |f| %> 
 <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, :topic_name do |b| %> 
   <%= b.label(class: "check_box") do %>
     <%= b.check_box(class: "check_box") %>
     <%= b.object.topic_name %></br>
   <% end %>
 <% end %> 
 <%= f.submit %>
<% end %>

Answer 2

您当然可以在块内部呈现HTML：

   <%= form_for @user do |f| %> 
      <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, : topic_name do |b| %>
      <div  class="my-checkbox-wrapper">
        <%= b.label(class: "foo") do %>
          <%= b.object.topic_name %>
          <%= b.check_box(class: "bar") ></br>
       <%end%>
       <%= f.submit %>
    <%end%>

你可以看看这个example

Answer 3

这是一个非常广泛的问题。简而言之，使用CSS。

例如使用Bootstrap 4：

<%= form_for @user do |f| %>
<div class="form-check">
  <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, :topic_name, class: 'form-check-input' %>
</div>
<%= f.submit %>
<% end %>