嘿，刚看了你的代码，问题出在每个ProductCard都单独包裹了Container和Row，这就导致每个卡片都被放在自己的一行里，自然就垂直排列啦。咱们只需要调整组件的结构，把布局的控制权交给父组件Home，就能实现每行3张的效果。

第一步：简化ProductCard组件 #

把ProductCard里的Container和Row去掉，只保留Col和Card部分，因为布局的Row应该统一放在Home组件中管理：

import React from 'react'
import { Card, Col, Button} from 'react-bootstrap'

function ProductCard(props){
  return(
    <Col md={4} xs={6} className="mb-4"> {/* md=4 保证每行3个，xs=6小屏幕每行2个，mb-4加底部间距 */}
      <Card border="primary" style={{width: '100%'}}> {/* 宽度设为100%，适应Col的宽度 */}
        <Card.Img variant="top" src={props.product.image}/>
        <Card.Body>
          <Card.Title>{props.product.name}</Card.Title>
          <Card.Text>Price: ${props.product.price}, Quantity: {props.product.quantity} </Card.Text>
          <Button variant="primary">Add to Cart</Button>
        </Card.Body>
      </Card>
    </Col>
  )
}

export default ProductCard

这里做了几个关键调整：

• 移除了多余的Container和Row，只保留Col作为卡片的容器
• md={4}：因为Bootstrap栅格是12列，12/3=4，所以每个卡片占4列，刚好每行3个
• xs={6}：小屏幕（手机）下每行显示2个卡片，提升移动端体验
• className="mb-4"：给每个卡片加底部间距，避免挤在一起
• Card的宽度设为100%，让卡片自适应Col的宽度

第二步：调整Home组件的布局 #

在Home组件中，把所有ProductCard放在一个统一的Row和Container里，这样栅格系统就能正确排列卡片：

import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Container, Row } from 'react-bootstrap';
import axios from 'axios';
import ProductCard from './ProductCard';

function Home(){
  const url = 'http://localhost:8888/ProgWeb/public/api/products'
  const [product, setProduct]=useState({
    loading: false,
    data: null,
    error: false
  })

  useEffect(() => {
    setProduct({ loading:true, data: null, error: false })
    axios.get(url)
      .then(response => {
        setProduct({ loading: false, data: response.data, error: false })
      })
      .catch(() =>{
        setProduct({ loading: false, data: null, error: true })
      })
  }, [url])

  let content = null
  if(product.loading){
    content = <div>Loading products...</div> // 加个加载状态提示更友好
  } else if(product.error){
    content = <div>Failed to load products</div> // 错误状态提示
  } else if(product.data){
    // 把所有ProductCard放在一个Row里，外面套Container
    content = (
      <Container className="mt-4">
        <Row>
          {product.data.map((product, key) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </Row>
      </Container>
    )
  }

  return (
    <div>
      {content}
    </div>
  );
}

export default Home;

这里的关键修改：

• 把循环生成的ProductCard全部包裹在一个<Row>中，外层再套<Container>来控制整体宽度
• 添加了加载和错误状态的提示，提升用户体验
• 移除了Home组件中多余的CardDeck等没用的导入

最后检查 #

确保你已经在项目中正确引入了React-Bootstrap的CSS，通常在index.js或者App.js里：

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

这样修改后，你的商品卡片就会在中等屏幕及以上每行显示3个，小屏幕每行2个，完美实现横向布局啦！

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