bootstrap 从左到右列的网格布局

Question

我一直在试验 rails 6，但我对某个 bootstrap 网格放置感到困惑。我想在照片博客中创建一些东西。这意味着人们可以上传照片或文本，它应该显示在一个网格系统中，填充 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。

此示例是纯粹的 ruby，但您可以使用适当的 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

以上代码为纯Rubyreturns:

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

bootstrap 从左到右列的网格布局

bootstrap grid layout from left to right column

ruby

bootstrap-4

ruby-on-rails-6