Bootstrap4如何按屏幕尺寸动态分组为卡片添加row DIV包裹

你不需要针对不同屏幕输出两套HTML结构，也不需要在后端提前做分组渲染，通过少量JS逻辑监听断点变化动态包裹元素即可实现需求，代码可直接复用。

核心逻辑 #

• 以Bootstrap默认lg断点992px为分界，大屏每3个卡片为一组、中小屏每2个卡片为一组，每组用.row容器包裹
• 页面初始化、窗口尺寸变化时自动重新计算分组，重绘包裹结构
• 加入防抖逻辑避免窗口缩放时频繁触发DOM操作导致卡顿

代码实现 #

HTML结构 #

所有后端返回的卡片元素直接放入统一容器即可，无需提前包裹.row：

<div id="cardContainer">
  <!-- 后端返回的原始卡片代码直接放在此处 -->
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
  <div class="col-lg-4 col-md-6 cardHolder">...</div>
</div>

JS逻辑 #

// 防抖工具函数
const debounce = (fn, delay = 120) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

const wrapCardGroups = () => {
  const container = document.querySelector('#cardContainer');
  const cards = Array.from(container.querySelectorAll('.cardHolder'));
  // 计算当前断点下每组卡片数量
  const perGroup = window.innerWidth >= 992 ? 3 : 2;
  // 清空容器
  container.innerHTML = '';
  // 分组包裹
  for(let i = 0; i < cards.length; i += perGroup) {
    const rowEl = document.createElement('div');
    rowEl.className = 'row';
    cards.slice(i, i+perGroup).forEach(card => rowEl.append(card));
    container.append(rowEl);
  }
}

// 初始化执行
wrapCardGroups();
// 监听窗口变化重排
window.addEventListener('resize', debounce(wrapCardGroups));

说明 #

• 你现有卡片的col-lg-4 col-md-6类名和分组逻辑完全匹配：大屏下3个col-lg-4刚好占满12栅格宽度，中小屏下2个col-md-6也刚好占满整行，不需要调整类名
• 支持任意数量的卡片，最后一组不足额定数量时会自动按实际数量包裹，不会出现布局偏移
• 不会破坏卡片上原有绑定的事件，重排时只是移动DOM节点不会重新创建元素

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