如何使用rails遍历引导卡答案

【问题标题】：How to iterate through a bootstrap card with rails如何使用rails遍历引导卡
【发布时间】：2020-08-25 22:33:02
【问题描述】：

我不确定迭代的开始和结束位置

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

<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>

这就是我的样子

what mine loos like

<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-rails bootstrap-4

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

【讨论】：