Bootstrap网格系统失效：如何让ProductCard组件横向排列？

核心问题分析 #

当前代码存在两个关键问题：

1. 未遍历产品数组：Home 组件直接将整个 featuredProducts 数组传给 ProductCard，但 ProductCard 是为单个产品设计的卡片组件，没有处理数组的逻辑，导致只渲染了一个卡片容器，自然纵向显示。
2. （潜在）Bootstrap 样式未生效：如果项目未正确引入 Bootstrap CSS 文件，row/col-3 等网格类不会发挥作用，也会造成卡片纵向堆叠。

具体修改步骤 #

1. 修正 Home 组件的渲染逻辑 #

在 row 容器内循环遍历产品数组，为每个产品单独渲染 ProductCard：

<Container classProp="featured-wrapper py-5 home-wrapper-2">
  <div className="row">
    {/* 遍历产品数组，逐个渲染卡片 */}
    {featuredProducts.map(product => (
      <ProductCard key={product.id} data={product} />
    ))}
  </div>
</Container>

注意：必须添加 key 属性（用产品唯一 ID 即可），保证 React 列表渲染的性能与正确性。

2. 确保 ProductCard 处理单个产品数据 #

确认 ProductCard 组件接收的是单个产品对象，而非数组，内部渲染逻辑基于单个产品数据：

const ProductCard = ({ data }) => {
  return (
    <div className={location.pathname === "/store" ? `gr-${grid}` : "col-3"}>
      {/* 渲染单个产品内容示例 */}
      <img src={data.imageUrl} alt={data.name} />
      <h6>{data.name}</h6>
      <span>{data.price}</span>
    </div>
  );
};

3. 验证 Bootstrap CSS 引入 #

确保项目已加载 Bootstrap 样式，可在入口文件（如 index.js）中添加：

import 'bootstrap/dist/css/bootstrap.min.css';

或通过 CDN 在 HTML 中引入：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

验证结果 #

修改完成后，row 容器内的 col-3 卡片会按 Bootstrap 网格规则横向排列，一行最多显示 4 个卡片（col-3 占 12 格布局中的 3 格），超出部分自动换行。

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