基于Bootstrap+React实现每行不同颜色的响应式布局需求

针对你用React+Bootstrap构建的响应式列表，要实现不同行（适配不同屏幕下的每行元素数量）呈现不同颜色，有两种可靠的实现方式：

方法一：React动态分组渲染（推荐，适配所有场景） #

这种方法通过React计算当前屏幕断点对应的每行元素数量，将列表项分组后给每组统一设置颜色，完全适配Bootstrap的响应式变化。

1. 定义颜色数组与状态

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 预设行颜色（最多5行，对应20个元素）
  const rowColors = ['#f8d7da', '#d1ecf1', '#fff3cd', '#d4edda', '#cce5ff'];
  // 存储当前每行的元素数量
  const [itemsPerRow, setItemsPerRow] = useState(4);
  // 你的列表数据，这里用示例数据
  const items = Array.from({ length: 20 }, (_, i) => i + 1);

  // 监听窗口大小变化，更新每行元素数量
  useEffect(() => {
    const updateItemsPerRow = () => {
      const width = window.innerWidth;
      if (width >= 768) {
        setItemsPerRow(4); // md及以上，col-md-3对应4个/行
      } else if (width >= 576) {
        setItemsPerRow(3); // sm断点，可能显示3个/行
      } else {
        setItemsPerRow(1); // xs断点，1个/行
      }
    };

    // 初始化执行
    updateItemsPerRow();
    // 添加监听
    window.addEventListener('resize', updateItemsPerRow);
    // 清理监听
    return () => window.removeEventListener('resize', updateItemsPerRow);
  }, []);

  // 将列表项按每行数量分组
  const groupedItems = [];
  for (let i = 0; i < items.length; i += itemsPerRow) {
    groupedItems.push(items.slice(i, i + itemsPerRow));
  }

2. 渲染分组后的列表

return (
    <div className="row">
      {groupedItems.map((rowItems, rowIndex) => (
        <>
          {rowItems.map(item => (
            <div 
              className="holder col-md-3"
              style={{ backgroundColor: rowColors[rowIndex % rowColors.length] }}
              key={item}
            >
              <div className="block_content">{item}</div>
            </div>
          ))}
        </>
      ))}
    </div>
  );
};

export default YourComponent;

这种方式的优势是完全跟随Bootstrap的响应式断点，不管屏幕如何变化，每行的元素都会统一颜色，且颜色循环使用。

方法二：纯CSS+媒体查询（无需修改React逻辑） #

如果不想改动React渲染逻辑，可以通过CSS媒体查询结合nth-child选择器，针对不同断点设置每行元素的颜色。

1. 定义颜色变量

:root {
  --row-color-0: #f8d7da;
  --row-color-1: #d1ecf1;
  --row-color-2: #fff3cd;
  --row-color-3: #d4edda;
  --row-color-4: #cce5ff;
}

2. 针对不同断点设置样式

/* md及以上屏幕（≥768px），每行4个元素 */
@media (min-width: 768px) {
  .holder:nth-child(4n+1),
  .holder:nth-child(4n+2),
  .holder:nth-child(4n+3),
  .holder:nth-child(4n+4) {
    background-color: var(--row-color-0);
  }
  .holder:nth-child(4n+5),
  .holder:nth-child(4n+6),
  .holder:nth-child(4n+7),
  .holder:nth-child(4n+8) {
    background-color: var(--row-color-1);
  }
  .holder:nth-child(4n+9),
  .holder:nth-child(4n+10),
  .holder:nth-child(4n+11),
  .holder:nth-child(4n+12) {
    background-color: var(--row-color-2);
  }
  .holder:nth-child(4n+13),
  .holder:nth-child(4n+14),
  .holder:nth-child(4n+15),
  .holder:nth-child(4n+16) {
    background-color: var(--row-color-3);
  }
  .holder:nth-child(4n+17),
  .holder:nth-child(4n+18),
  .holder:nth-child(4n+19),
  .holder:nth-child(4n+20) {
    background-color: var(--row-color-4);
  }
}

/* sm断点（576px-767px），每行3个元素 */
@media (min-width: 576px) and (max-width: 767px) {
  .holder:nth-child(3n+1),
  .holder:nth-child(3n+2),
  .holder:nth-child(3n+3) {
    background-color: var(--row-color-0);
  }
  .holder:nth-child(3n+4),
  .holder:nth-child(3n+5),
  .holder:nth-child(3n+6) {
    background-color: var(--row-color-1);
  }
  .holder:nth-child(3n+7),
  .holder:nth-child(3n+8),
  .holder:nth-child(3n+9) {
    background-color: var(--row-color-2);
  }
  .holder:nth-child(3n+10),
  .holder:nth-child(3n+11),
  .holder:nth-child(3n+12) {
    background-color: var(--row-color-3);
  }
  .holder:nth-child(3n+13),
  .holder:nth-child(3n+14),
  .holder:nth-child(3n+15) {
    background-color: var(--row-color-4);
  }
  /* 剩余元素继续复用颜色 */
  .holder:nth-child(3n+16),
  .holder:nth-child(3n+17),
  .holder:nth-child(3n+18) {
    background-color: var(--row-color-0);
  }
  .holder:nth-child(3n+19),
  .holder:nth-child(3n+20) {
    background-color: var(--row-color-1);
  }
}

/* xs断点（≤575px），每行1个元素 */
@media (max-width: 575px) {
  .holder:nth-child(1n+1) { background-color: var(--row-color-0); }
  .holder:nth-child(1n+2) { background-color: var(--row-color-1); }
  .holder:nth-child(1n+3) { background-color: var(--row-color-2); }
  .holder:nth-child(1n+4) { background-color: var(--row-color-3); }
  .holder:nth-child(1n+5) { background-color: var(--row-color-4); }
  /* 后续元素循环复用颜色 */
  .holder:nth-child(1n+6) { background-color: var(--row-color-0); }
  .holder:nth-child(1n+7) { background-color: var(--row-color-1); }
  /* ... 直到第20个元素 */
}

这种方法适合不想修改React代码的场景，但需要提前根据最大元素数量（20个）编写对应选择器，若元素数量超过预设，颜色会循环复用。

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