React-Bootstrap卡片无法横向排列问题求助

问题分析 #

你当前的卡片只能单列显示，核心原因是栅格结构层级错误：

• 每个PaintDetails组件内部都包含独立的<Container>和<Row>，导致每一张卡片都被包裹在单独的行容器中，Bootstrap栅格系统无法将多个卡片合并到同一行布局。
• 父组件citadelPage.js没有正确利用React Bootstrap的「Row → Col → 内容」层级结构。

解决方案 #

将栅格的Row层级提升到父组件，让所有卡片的Col作为同一个Row的子元素；子组件仅负责渲染单张卡片的Col和Card内容。

修改后的代码 #

1. citadelPage.js

import React from "react";
import { useEffect } from "react";
import { Container, Row } from "react-bootstrap";
import { usePaintsContext } from '../hooks/usePaintContext.js';
import PaintDetails from "../components/PaintDetails.js";

export default function CitadelPage() {
  const {paints, dispatch} = usePaintsContext()

  useEffect(() => {
    const fetchPaints = async () => {
      const response = await fetch('http://localhost:4000/api/citadel')
      const json = await response.json()

      if (response.ok) {
        dispatch({type: 'SET_PAINTS', payload: json})
      }
    }

    fetchPaints()
  }, [dispatch])

  return (
    <>
      <h1 className="title text-center">Citadel Paint</h1>
      
      <Container className="border border-primary rounded bg-secondary">
        {/* 用React Bootstrap的Row作为所有卡片Col的统一父容器 */}
        <Row>
          {paints && paints.map((paint) => (
            <PaintDetails key={paint._id} paint={paint} />
          ))}
        </Row>
      </Container>
    </>        
  )
}

2. paintDetails.js

import { Button, Card, Col } from 'react-bootstrap';
import { useAuthContext } from '../hooks/useAuthContext';

const PaintDetails = ({ paint }) => {
  const { user } = useAuthContext();

  return (
    {/* 设置响应式宽度：大屏幕3列、中屏幕2列、小屏幕1列 */}
    <Col lg={4} md={6} xs={12} className='d-flex mb-3'>
      <Card className='bg-info flex-fill'>
        <Card.Body>
          <Card.Img 
            variant='top' 
            src={paint.paintImage} 
            alt="Paint Image" 
            style={{height: '50%', width: '100%'}} 
          />
          <div className="paint-details">
            <Card.Title className='text-center pt-2'>{paint.paintTitle} - {paint.paintCompany}</Card.Title>
            <p><strong>Type: </strong>{paint.paintType}</p>
            <p><strong>Prices: </strong></p>
            <ul>
              {/* 修正HTML结构：a标签应嵌套在li内部 */}
              <li><a href={paint.paintLink.elementLink} target="_blank" rel='noreferrer'>Element Games: {paint.paintPrice.elementPrice}</a></li>
              <li><a href={paint.paintLink.waylandLink} target="_blank" rel='noreferrer'>Wayland Games: {paint.paintPrice.waylandPrice}</a></li>
              <li><a href={paint.paintLink.hobbyworkshopPrice} target="_blank" rel='noreferrer'>Hobby Workshop: {paint.paintPrice.hobbyworkshopPrice}</a></li>
            </ul>
          </div>
          {user && (
            <div className="buttons mt-3 d-flex gap-2">
              <Button variant='primary'>Add to inventory</Button>
              <Button variant='primary'>Add to wishlist</Button>
            </div>
          )}
        </Card.Body>
      </Card>
    </Col>  
  )
}

export default PaintDetails;

额外优化说明 #

1. 栅格逻辑修正：同一Row下的Col会自动根据宽度属性分配每行数量（lg={4}对应大屏幕每行3张，因为Bootstrap栅格总宽度为12）。
2. HTML规范修正：调整了<a>与<li>的嵌套关系，避免无效HTML结构。
3. 响应式适配：添加md={6}、xs={12}属性，让页面在中等屏幕显示2张/行、小屏幕显示1张/行。
4. 布局美观度：给Col添加mb-3（底部外边距），给按钮容器添加mt-3（顶部外边距）和gap-2（按钮间距）。

内容的提问来源于stack exchange，提问作者S. Lowe