如何实现Bootstrap卡片在一行满时自动换行至下一行？

问题根源 #

你当前代码里用table包裹卡片容器，会干扰Bootstrap栅格的布局逻辑；另外card-deck组件的特性是强制所有卡片平分父容器宽度，卡片越多单个卡片就越窄，不适合用来控制固定每行的数量。

解决方案（用Bootstrap栅格系统实现每行3个） #

直接用栅格的row+col组合控制卡片宽度和换行逻辑，步骤如下：

1. 清理无效结构：删掉多余的table标签，栅格系统不需要表格布局。
2. 设置栅格容器：用row作为卡片父容器，给每个卡片包裹col-12 col-md-4的列容器——这个类的作用是：
   • 小屏幕（<768px）下占满整行，每行1个卡片
   • 中等屏幕及以上（≥768px）下每行占4列（12÷4=3），刚好每行3个卡片，第4个自动换行
3. 调整jQuery生成逻辑：遍历产品列表时，每个卡片都嵌套在对应的列容器里。

修改后的代码示例 #

HTML结构

<div class="row justify-content-md-center g-4">
    <!-- g-4是Bootstrap 5的间距类，用来给卡片之间加间距；Bootstrap 4可替换为mx-2 my-3这类类 -->
    <div id="card-container" class="col-12">
        <!-- jQuery foreach会在这里生成卡片 -->
    </div>
</div>

jQuery生成卡片的代码

// 假设你的产品列表是products数组
const products = [/* 你的产品数据 */];

let cardHtml = '';
$.each(products, function(index, product) {
    // 每个卡片外面包裹col-md-4 col-12的列容器
    cardHtml += `
        <div class="col-12 col-md-4">
            <div class="card h-100"> <!-- h-100让同一行卡片等高，可选 -->
                <img src="${product.imageUrl}" class="card-img-top" alt="${product.name}">
                <div class="card-body">
                    <h5 class="card-title">${product.name}</h5>
                    <p class="card-text">${product.description}</p>
                    <a href="#" class="btn btn-primary">查看详情</a>
                </div>
            </div>
        </div>
    `;
});

// 把生成的HTML插入到容器中
$('#card-container').html(cardHtml);

补充说明 #

• 若使用Bootstrap 4，将g-4替换为mx-auto mb-3这类间距类，或给col添加自定义padding控制间距。
• h-100类可让同一行卡片高度一致，提升视觉效果，不需要的话可以移除。

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