使用Rails迭代结合Bootstrap实现卡片3列响应式布局问题

你的代码存在几处Bootstrap网格和组件使用错误，导致卡片无法按预期排列：

错误点分析 #

1. 容器类冲突：最外层div同时混用card和row类，row是Bootstrap网格的行容器，不能与card组件类叠加使用，这会直接破坏网格布局逻辑。
2. 列配置重复冲突：外层row设置了row-cols-3 row-cols-md-3，内层列又添加col-md-3，两种列布局规则叠加导致布局失效。
3. 重复class属性：内层卡片div写了两个class属性（<div class="card photo" class="card-img-top">），HTML不允许元素存在多个class属性，后写的会覆盖前一个，导致样式失效。
4. 组件类误用：card-img-top是给卡片内图片元素的样式类，不应加到card容器上。

修正后的代码 #

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

关键调整说明 #

• 移除最外层的card类，保留row作为网格行容器，设置row-cols-1 row-cols-md-3：小屏幕（<768px）时1列堆叠，中等屏幕（≥768px）时3列排列，g-4用于设置卡片间距。
• 内层列仅保留col类，配合row的row-cols规则自动分配宽度。
• 合并卡片div的class属性，将card-img-top加到图片元素上。
• 移除无效的button嵌套link（Rails的link_to会生成a标签，嵌套在button里是无效HTML），直接给link_to添加btn btn-primary类实现按钮样式。
• 添加h-100让卡片高度统一，避免内容多少导致的高度不一致。

内容的提问来源于stack exchange，提问作者samko