PHP+Bootstrap实现响应式多商品轮播技术求助

我明白你的需求：要在产品页底部做一个相关商品轮播，每个幻灯片得放多个固定大小（300x400px）的商品卡片，而且不同屏幕下显示的数量要自动调整——之前用弹性列的方案因为卡片尺寸固定没法用，对吧？

下面是我整理的完整解决方案，分后端代码调整和前端CSS适配两部分：

第一步：调整PHP代码，将商品分组到轮播幻灯片中 #

原来的代码是每个商品生成一个单独的carousel-item，这显然不符合“一个幻灯片多个商品”的需求。我们需要先把查询到的商品按每组（比如最多4个）分组，然后为每组生成一个幻灯片：

<?php
$related = '';
$related .= '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">';
$related .= '<div class="carousel-inner">';

// 先获取所有相关商品到数组
$params = [$product_name, $product_name, $_SESSION['locale']['product_set']];
$sql = "SELECT * FROM products WHERE MATCH(product_name) AGAINST(?) AND product_name!=? AND product_set=? LIMIT 15";
$stmt = DB::run($sql, $params);
$all_related_products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 按每组4个商品拆分（后续用CSS控制不同屏幕显示数量）
$product_groups = array_chunk($all_related_products, 4);

foreach ($product_groups as $group_idx => $product_group) {
    // 给第一个幻灯片添加active类
    $active_class = $group_idx === 0 ? ' active' : '';
    $related .= '<div class="carousel-item' . $active_class . '">';
    // 用flex容器包裹商品卡片，实现横向排列
    $related .= '<div class="d-flex justify-content-center align-items-start gap-3">';
    
    foreach ($product_group as $product) {
        $product_id = htmlspecialchars($product['id']);
        $product_name = htmlspecialchars($product['product_name']);
        // 替换成你实际的商品信息渲染代码
        $related .= '<div class="related-product-card">';
        $related .= '<a href="/product/' . $product_id . '">';
        $related .= '<img src="/path/to/product-image/' . $product_id . '.jpg" alt="' . $product_name . '" class="img-fluid h-75 object-fit-cover">';
        $related .= '<h6 class="mt-2 text-center">' . $product_name . '</h6>';
        $related .= '</a>';
        $related .= '</div>';
    }
    
    $related .= '</div>'; // 关闭flex容器
    $related .= '</div>'; // 关闭carousel-item
}

$related .= '</div>'; // 关闭carousel-inner

// 轮播控制按钮（替换成Bootstrap官方图标更美观）
$related .= '<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">';
$related .= '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
$related .= '<span class="sr-only">Previous</span>';
$related .= '</a>';
$related .= '<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">';
$related .= '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
$related .= '<span class="sr-only">Next</span>';
$related .= '</a>';

$related .= '</div>'; // 关闭carousel容器
?>

第二步：添加CSS，固定商品尺寸并适配不同屏幕 #

核心思路是固定商品卡片尺寸，然后通过媒体查询在不同屏幕下隐藏每组中多余的商品，实现每个幻灯片显示对应数量的商品：

/* 固定商品卡片的宽高 */
.related-product-card {
    width: 300px;
    height: 400px;
    border: 1px solid var(--grey3);
    flex-shrink: 0; /* 禁止卡片被压缩，保证尺寸固定 */
    overflow: hidden; /* 防止商品内容溢出 */
}

/* 轮播幻灯片布局：横向排列商品，居中对齐 */
#carouselExampleControls .carousel-item {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

/* 媒体查询：适配不同屏幕尺寸 */
/* 移动端（<768px）：每个幻灯片显示1个商品 */
@media (max-width: 767.98px) {
    .related-product-card:not(:first-child) {
        display: none;
    }
}

/* 平板端（768px-991px）：每个幻灯片显示2个商品 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .related-product-card:nth-child(n+3) {
        display: none;
    }
}

/* 桌面中端（992px-1199px）：每个幻灯片显示3个商品 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .related-product-card:nth-child(n+4) {
        display: none;
    }
}

/* 大屏桌面（≥1200px）：显示全部4个商品 */
@media (min-width: 1200px) {
    .related-product-card {
        display: block;
    }
}

方案说明 #

1. 后端分组：用array_chunk把商品按每组4个拆分，保证每个幻灯片最多有4个商品，后续通过CSS控制显示数量，兼顾后端逻辑简洁和前端适配灵活性。
2. 固定尺寸保障：给商品卡片设置flex-shrink:0，确保无论屏幕怎么缩放，卡片都不会被压缩变形。
3. 屏幕适配：通过媒体查询精准控制不同屏幕下显示的商品数量，完美匹配你的需求。
4. Bootstrap兼容：保留了Bootstrap轮播的原生行为，控制按钮和动画都能正常工作，不需要额外修改JS。

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