如何编辑Django模板移除构建Bootstrap轮播的for循环实现响应式？

• 核心改造逻辑：移除原有模板中固定每4个商品拆分轮播项的服务端判断逻辑，改用前端规则适配不同屏幕尺寸，实现真正的响应式效果。

方案1：纯Bootstrap栅格实现（无额外JS） #

适合不需要按组滑动、单页可滚动展示所有商品的场景，仅需调整原有模板代码即可：

<div class="carousel-inner">
  <div class="carousel-item active">
    <!-- 用row+响应式栅格自动适配每行展示数量 -->
    <div class="row g-3">
      {% for i in products %}
      <!-- 响应式栅格：<576px屏幕每行2个，<768px每行3个，≥768px每行4个，可按需调整 -->
      <div class="col-6 col-sm-4 col-md-3">
        <div class="card h-100 align-items-center"> <!-- h-100统一卡片高度 -->
          <img src='/media/{{i.image}}' class="card-img-top mt-2" style="height: 12rem; object-fit: contain;" alt="{{i.product_name}}">
          <div class="card-body text-center">
            <h5 id="productName{{i.id}}" class="card-title">{{i.product_name}}</h5>
            <p id="productPrice{{i.id}}" class="card-text">₹ {{i.price}}</p>
            <span id='button{{i.id}}'>
              <button id='product{{i.id}}' class="btn btn-primary cart btn-sm">加入购物车</button>
            </span>
            <a href="/shop/productView/{{i.id}}" id="quickView{{i.id}}" class="btn btn-primary ml-1 btn-sm">快速查看</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

方案2：响应式分组滑动（加少量JS） #

适合需要按页滑动、不同屏幕下每页展示商品数量自动调整的场景：

1. 先给方案1中的商品列加上自定义类product-card-col，即把<div class="col-6 col-sm-4 col-md-3">改为<div class="col product-card-col">
2. 在页面尾部插入以下JS代码即可实现自动分组：

function adjustCarouselGroup() {
  const carouselInner = document.querySelector('.carousel-inner');
  const allProductCols = Array.from(carouselInner.querySelectorAll('.product-card-col'));
  // 清空现有轮播结构
  carouselInner.innerHTML = '';
  // 根据屏幕宽度设置每页展示数量，可按需调整
  let perPageCount = 4;
  if (window.innerWidth < 576) perPageCount = 1; // 移动端竖屏每页1个
  else if (window.innerWidth < 768) perPageCount = 2; // 小屏/移动端横屏每页2个
  else if (window.innerWidth < 992) perPageCount = 3; // 平板每页3个
  // 动态生成轮播项
  for (let i = 0; i < allProductCols.length; i += perPageCount) {
    const carouselItem = document.createElement('div');
    carouselItem.className = `carousel-item ${i === 0 ? 'active' : ''}`;
    const row = document.createElement('div');
    row.className = 'row g-3';
    row.append(...allProductCols.slice(i, i + perPageCount));
    carouselItem.append(row);
    carouselInner.append(carouselItem);
  }
  // 重新初始化Bootstrap轮播
  new bootstrap.Carousel(document.querySelector('#你的轮播组件ID'));
}
// 页面加载和窗口尺寸变化时自动调整分组
window.addEventListener('load', adjustCarouselGroup);
window.addEventListener('resize', adjustCarouselGroup);

注意把代码中的#你的轮播组件ID替换为你实际轮播外层容器的ID属性值。

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