2016-08-30 13 views
0

私はブートストラップ3とレールを使用しています。異なる列幅を持つ動的グリッドを作成する方法

私は仕事と呼ばれる多くのレコードを持つモデルを持っています。

列の幅が行によって異なる動的グリッドを作成したいとします。このような何か:

enter image description here

私のerbビュー:

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

この方法では、各li要素がCOL-SM-4幅毎回を持つことになります。私はRailsのを伝える必要があります

「すべての4つの要素がXに列幅を変更...」

任意のヘルプ?ありがとう!このような

答えて

1

何か:

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

それは次のように私は最終的にレイアウトをカスタマイズするためにあなたの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 %> 

感謝を!

関連する問題