2016-03-04 51 views
0

我正在嘗試創建一個Rails應用程序。我有一堆「課程」對象,我正在循環使用,我希望將它們分成三個不同的列。共有21個對象,每列7個。顯示列中的項目(Rails)

<% 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節課?

回答

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>