React通过map渲染Grid天气卡片时堆叠显示、需每行展示5张卡片怎么解决？

你当前的代码逻辑错误在于将 <Row> 组件写在了 map 循环内部，每遍历一个地点就生成一个独立的行，因此所有卡片都会垂直堆叠排列。

你需要把 <Row> 挪到 map 循环外部，所有卡片对应的 <Col> 全部放在同一个 <Row> 下即可实现横向排列。如果要实现每行固定展示5张卡片，可以直接用Bootstrap提供的row-cols系列类，写法更简单直观：

const FavoriteWeatherCards = weather.favoritesWeather.map(
    // 给遍历项添加唯一key，避免React渲染警告，可根据你的实际数据调整key字段
    (favoriteLocation) => (
      <Col key={favoriteLocation.location.id} className="mb-3">
        <SmallConditionsCard data={favoriteLocation} />
      </Col>
    )
  );

// row-cols-md-5 表示在中等及以上屏幕尺寸下，每行自动排列5个元素
return (
  <Row className="row-cols-1 row-cols-md-5 justify-content-md-center g-3">
    {FavoriteWeatherCards}
  </Row>
);

补充说明：

• row-cols-1是设置移动端小屏幕下每行展示1张卡片，可根据你的适配需求自行调整
• g-3是设置卡片之间的间距，可自行调整数值
• 如果你习惯用栅格宽度设置，也可以给Col设置md={2}属性，12栅格总宽度下5个md={2}的列总占宽为10，剩余宽度会被justify-content-md-center自动分配为左右间距，也能实现近似每行5张的效果

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