создать таблицы строк из 4 в рельсах

Question

У меня есть эти флажки, я пытаюсь создать строки из 4 флажков. На данный момент он создает одну строку.

<table> 
    <%= f.collection_check_boxes :expertise_ids, Expertise.all, :id, :name do |b| %> 
     <td> 
     <label style="margin-left:5px; margin-right:15px;" class="checkbox-inline"> 
     <%= b.check_box %> 
     <%= b.label %> 
     </label> 
     </td> 
    <% end %> 
</table>     

Iv попробовал что-то вроде этого:

<table> 
    <%= f.collection_check_boxes :expertise_ids, Expertise.all, :id, :name do |b| %> 
    <% tablerows = 0 %> 
     <td> 
     <label style="margin-left:5px; margin-right:15px;" class="checkbox-inline"> 
     <%= b.check_box %> 
     <%= b.label %> 
     <% tablerows += 1 %> 
     <% break if tablerows == 3 %> 
     </label> 
     </td> 
    <% end %> 
</table> 

Im пытается что-то вроде этого, чтобы перебрать и каждый раз, когда это рассчитывает на 4 в попытке сгенерировать новую строку, но я не уверен, как это сделать.

Answer 1

Вы можете использовать in_groups_of:

<table> 
    <% Expertise.all.in_groups_of(4, false) do |expertise_group| %> 
    <tr><!-- a new row for each group of four --> 
     <%= f.collection_check_boxes :expertise_ids, expertise_group, :id, :name do |b| %> 
     <td><!-- each checkbox get a column on its own --> 
      <label style="margin-left:5px; margin-right:15px;" class="checkbox-inline"> 
      <%= b.check_box %> 
      <%= b.label %> 
      </label> 
     </td> 
     <% end %> 
    </tr> 
    <% end %> 
</table> 

Answer 2

Вы должны обернуть их внутри тега tr. Кроме того, вы устанавливаете свой счетчик следующим образом.

<table> 
    <% tablerow = 0 %> 
    <%= f.collection_check_boxes :expertise_ids, Expertise.all, :id, :name do |b| %> 
    <% break if tablerow == 4; tablerow += 1; %> 
    <tr> 
     <td> 
     <label style="margin-left:5px; margin-right:15px;" class="checkbox-inline"> 
      <%= b.check_box %> 
      <%= b.label %> 
     </label> 
     </td> 
    </tr> 
    <% end %> 
</table> 

Answer 3

ли вы рассмотреть Flexbox? Логика обертывания позаботится о себе.

https://jsfiddle.net/c41pL74r/2/

Просто убедитесь, что любой запас/дополнение добавляется на элементах внутри div с, а не непосредственно на них, в противном случае вы должны будете намеренно учитывать ширину с calc().