从左到右列的引导网格布局答案

【问题标题】：bootstrap grid layout from left to right column从左到右列的引导网格布局
【发布时间】：2023-03-10 05:05:01
【问题描述】：

我一直在尝试使用 rails 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>

【问题讨论】：

我假设您所说的“从左向右移动”是指在第一行被 4 个项目（照片或文本）填充后从左侧开始新行。我认为您不想为此使用 Bootstrap 网格系统。 CSS Grid 就是为此而生的。 css-tricks.com/snippets/css/complete-guide-grid您还应该更改问题的标题。这与 Rails 6 无关。
我的意思是让第一行像 1 - 2 - 3 - 4 一样移动，然后向下移动一行并继续。我想也许 ruby 有办法做到这一点，因为 each.do 将它们放在一起。

标签： ruby bootstrap-4 ruby-on-rails-6

【解决方案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

以上代码作为纯 Ruby 返回：

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

【讨论】：