如何创建具有不同列宽的动态网格

Question

我正在使用Bootstrap 3和Rails。

我有一个名为Work的模型，有许多记录。

我想创建一个动态网格，其列宽根据其行而变化。像这样：

我的观点：

<ul class="row">
    <% @works.each do |s| %>
        <li class="col-sm-4"><%= s.name %></li>
    <% end %>
</ul>

这样，每个li元素每次都会有一个col-sm-4宽度。

我需要告诉Rails＆＃34;每4个元素将列宽更改为x ...＆＃34;

有任何帮助吗？谢谢！

Answer 1

这样的事情：

<% @works.each_with_index do |s,index| %>
        <li class="col-sm-<%= index%4 == 0 ? '4': '6' %>"><%= s.name %></li>
    <% end %>

Answer 2

我最终使用你的each_with_index来自定义布局：

           <% @services.each_with_index do |s, index| %>
                <% if index < 2 %> 
                    <li class="col-sm-6"><%= s.name %></li>
                <% elsif index.between?(2,4) %>
                    <li class="col-sm-4"><%= s.name %></li>
                <% elsif index > 4  %>
                    <li class="col-sm-6"><%= s.name %></li>
                <% end %>
            <% end %>

谢谢！