ruby-on-rails - 如何使用rails遍历引导卡

Question

我不确定迭代的开始和结束在哪里

我使用引导框架工作，它应该看起来像这样

引导程序是什么样的

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

这就是我的样子

我的衣服是什么样的

<div class="row row-cols-1 row-cols-md-3">
  <% @apparels.each do |apparel| %>
      <div class="col mb-4">
        <div class="card h-100">
          <%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
          <div class="card-body">
            <h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
            <p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
          </div>
        </div>
      </div>
<% end %>
  </div>

不知道我做错了什么

标签： ruby-on-railsbootstrap-4

Answer 1

由于您希望每行每 3 个框，您可以将第 3 行更改为 col-md-4，每列总共为 12，因此 12/4 = 3 它将自动移动到下一行

<div class="row row-cols-1 row-cols-md-3">
  <% @apparels.each do |apparel| %>
      <div class="col-md-4">
        <div class="card h-100">
          <%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
          <div class="card-body">
            <h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
            <p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
          </div>
        </div>
      </div>
  <% end %>
</div>