Question

我一直在尝试使用导轨6，但对于某些自举网格放置，我一直感到困惑。我想在照片博客的行中创建一些东西。这意味着人们可以上传照片或文本，并且应该在网格系统中显示该图像或文本，并填充4列，然后从左向右向下移动，直到最终达到5行，然后分页编码（但这是另一次）。到目前为止，我已经制作了一个网格并可以显示上传到数据库的所有内容，但是我的代码仅填充第一行，并且没有从左到右移动。有什么建议吗？

<tbody>
    <% @ads.each do |ad| %>
      <tr>
        <td><%= ad.title %></td>
        <td><%= ad.description %></td>
        <td><%= ad.area %></td>
        <td><%= ad.contact %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Ad', new_ad_path %>


<div class="container">
  <% @ads.each do |ad| %>
    <div class="row mt-3">
      <div class="col-sm">
        <div class="card">
      <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
        <h5 class="card-title"> <%= ad.title %> </h5>
        <p class="card-text"><%= ad.description %></p>
        <p class="card-text"><%= ad.area %></p>
        <a href="#" class="card-link"><%= ad.contact %></a>
        </div>
    </div>
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  <% end %>
</div>

Answer 1

您可以通过以下方式使用Enumerable#each_slice。

此示例是纯红宝石，但是您可以使用适当的erb和html标记轻松将其转置为rails视图：

ads = (11..24) # emulates your collection

items_per_row = 5
ads.each_slice(items_per_row) do |row_items|
  # start a row: <div class="row mt-3">
  row_items.each do |item|
    # start a columnn: <div class="col-sm">
      print "| #{item}" # only for this demo, add your item with markup here
    # close the column: </ div>
  end
  # close the row: </ div>
  puts # only for this demo, remove in erb
end

上面的代码作为纯Ruby返回：

# | 11| 12| 13| 14| 15
# | 16| 17| 18| 19| 20
# | 21| 22| 23| 24

引导网格布局从左到右

1 个答案: