使用 rails 进行迭代并使用 bootstrap 让卡片以 3 列的形式显示？-解网

问：

我正在尝试遍历轨道以创建卡片，这些卡片在 3 中网格化，然后使用每个新行等。目前，这些卡只能垂直堆叠。我希望它们以 3 列为一组，然后在屏幕变小时调整大小以堆叠。

目前我的代码如下所示： https://i.imgur.com/mnbDIl5.png

当我把我的屏幕变小时，它似乎变成了这样的 3x3：https://i.imgur.com/G2T9leW.png

任何人都可以帮助/建议我哪里出错了吗？

当前使用 Bootstrap v5.2.2

提前致谢！

<div class="card text-center text-white row row-cols-3 row-cols-md-3" style="background-color:#ffa82e00;">
  <% @drinks.each do |drink| %>
      <div class="col-md-3">
        <div class="card photo" class="card-img-top">
          <%= cl_image_tag drink.photo.key, height: 350, width: 350, crop: :fit if drink.photo.attached? %>
          <div class="card-body">
            <h5 class="card-title"><%= link_to drink.name, drink_path(drink) %></h5>
            <p class="card-text">Price: £<%= drink.price %></p>
            <button type="button" class="btn btn-primary"><%= link_to "Buy now", new_drink_order_path(drink) %></button>
          </div>
        </div>
      </div>
  <% end %>
</div>

无论视口大小如何，这些卡片都只能 1 x 1 堆叠，而我对 bootstrap 的新手知识阻碍了我让它们以 3 列的形式显示。

Ruby-on-Rails Ruby 推特引导

<div class="row">
<% @drinks.each do |drink| %>
  <div class="col-12 col-lg-4">
      <div class="card text-center text-white" style="background-color:#ffa82e00;">
        <div class="card photo" class="card-img-top">
          <%= cl_image_tag drink.photo.key, height: 350, width: 350, crop: :fit if drink.photo.attached? %>
          <div class="card-body">
            <h5 class="card-title"><%= link_to drink.name, drink_path(drink) %></h5>
            <p class="card-text">Price: £<%= drink.price %></p>
            <button type="button" class="btn btn-primary"><%= link_to "Buy now", new_drink_order_path(drink) %></button>
          </div>
        </div>  
      </div>
  </div>
<% end %>
</div>

你可以像这样将卡片包裹在网格中。这将在 lg 屏幕上及以上形成 3 张卡片宽的网格，然后减少到低于该屏幕的 1 列。

循环也略有变化，以更正确地复制卡本身，而不是额外的代码。

https://getbootstrap.com/docs/5.2/layout/grid/

上面的文档更详细地解释了这些列。版本 5.2 在超过 12 列后自动处理换行列，所以这应该是您所需要的！

使用 rails 进行迭代并使用 bootstrap 让卡片以 3 列的形式显示？

Iterating with rails and using bootstrap to get cards to display in columns of 3?

评论

评论