我正在嘗試遍歷導軌以創建在 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 >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 比 1 堆疊，而且我對引導程式的新手知識阻礙了我讓它們以 3 列顯示。
uj5u.com熱心網友回復：
嘗試這個：
<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 列后自動處理換行列，所以這應該就是您所需要的！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/529723.html