显示列中的项目(Rails)

时间:2016-03-04 03:15:35

标签: css ruby-on-rails

我正在尝试创建一个rails应用。我得到了一堆教训'我正在循环的对象,我希望将它们放在3个不同的列中。总共有21个对象,每列有7个。

<% lessons.each do |lesson| %>

    <% status = user.lesson_user_status.where(lesson: lesson)[0].status %>

    <% if status != "completed" && lesson.title != "Pre/Post Quiz"%>
        <% if(!hasSeenAvailableLesson) %>
            <%= link_to lesson.title, show_lesson_path(lesson), class: "btn btn-default #{status}", "data-toggle"=> "tooltip", title: lesson.description %>
            <% hasSeenAvailableLesson = true %> 
        <% else %>
            <%= link_to lesson.title, '', class: "btn btn-default blocked #{status}", "data-toggle"=> "tooltip", title: lesson.description %>
        <% end %>

        <br>
        <br>
    <% end %>

<% end %>

我认为使用Bootstrap列是个好主意,但我不知道如何在这里实现它。如何告诉程序每栏有7节课?

1 个答案:

答案 0 :(得分:0)

检查一下这个想法!

并根据需要进行修改。

Bootstrap grid examples

<div class="col-md-12"> #(12 / 4 = 3 (for columns you want))
<% ctr = 0 %>

# iteration starts here
<% lessons.each do |lesson| %>

  <% if ctr == 0 || ctr == 3 %>
    # new column to make
    <div class="col-md-4">
    # insert data here
    ....
    # return ctr to 0 (for checking another count)
    <% if ctr == 3 %>
      <% ctr = 0 %>
    <% end %>
    # or <% if ctr == 3 then ctr = 0 %>  
  <% else %>
    # insert data ONLY (DON'T CREATE NEW COLUMN)
    .....
    # closing of <div>
    </div>
  <% end %>

  <% ctr += 1%>
<% end %>
# iteration ends here
</div>