React中React Bootstrap卡片Flex布局失效问题求助

问题分析 #

布局失效的核心原因有两个：

• CSS中使用类选择器.container，但组件里的容器是id="container"，选择器与元素属性不匹配
• 仅第一张卡片被包裹在容器内，其余两张卡片的外层div独立存在，未被flex容器覆盖

修复方案 #

方案1：纯CSS修复（调整容器结构与选择器） #

将所有卡片统一放入同一个flex容器中，确保CSS选择器正确匹配：

修改后的组件代码：

import 'bootstrap/dist/css/bootstrap.min.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import './Style.css';
import img from './images/download.jpg'
import Button from 'react-bootstrap/Button';

function MovieList() {
  return (
    <>
      {/* 所有卡片统一放在这个flex容器内 */}
      <div className="card-container">
        <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>
          <Card.Header>
            <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
          </Card.Header>
          <Card.Img variant="top" src={img} />
          <Card.Body className='title'>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
              Card --->1
            </Card.Text>
          </Card.Body>
          <ListGroup className="list-group-flush">
            <ListGroup.Item>Cras justo odio</ListGroup.Item>
            <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
            <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
          </ListGroup>
        </Card>

        <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>  
          <Card.Header>
            <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
          </Card.Header>
          <Card.Img variant="top" src={img} />
          <Card.Body className='title'>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
              Card --->2
            </Card.Text>
          </Card.Body>
          <ListGroup className="list-group-flush">
            <ListGroup.Item>Cras justo odio</ListGroup.Item>
            <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
          </ListGroup>
          <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
        </Card>

        <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>
          <Card.Header>
            <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
          </Card.Header>
          <Card.Img variant="top" src={img} />
          <Card.Body className='title'>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
              Card --->3
            </Card.Text>
          </Card.Body>
          <ListGroup className="list-group-flush">
            <ListGroup.Item>Cras justo odio</ListGroup.Item>
            <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
          </ListGroup>
          <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
        </Card>
      </div>
    </>
  )
}
       
export default MovieList;

修改后的CSS代码：

.card-container {
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;
  gap: 1rem; /* 可选：添加卡片间距，优化视觉效果 */
}

方案2：使用React Bootstrap内置布局组件（贴合框架规范） #

利用React Bootstrap提供的Row和Col组件，实现响应式横向布局，无需自定义CSS：

import 'bootstrap/dist/css/bootstrap.min.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import img from './images/download.jpg'
import Button from 'react-bootstrap/Button';

function MovieList() {
  return (
    <>
      {/* xs/sm/md属性控制不同屏幕尺寸下每行显示的卡片数量 */}
      <Row xs={1} sm={2} md={3} className="g-4">
        <Col>
          <Card style={{ fontSize: '10px' }} className='box'>
            <Card.Header>
              <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
            </Card.Header>
            <Card.Img variant="top" src={img} />
            <Card.Body className='title'>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Card --->1
              </Card.Text>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroup.Item>Cras justo odio</ListGroup.Item>
              <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
              <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
            </ListGroup>
          </Card>
        </Col>

        <Col>
          <Card style={{ fontSize: '10px' }} className='box'>  
            <Card.Header>
              <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
            </Card.Header>
            <Card.Img variant="top" src={img} />
            <Card.Body className='title'>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Card --->2
              </Card.Text>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroup.Item>Cras justo odio</ListGroup.Item>
              <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
            </ListGroup>
            <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
          </Card>
        </Col>

        <Col>
          <Card style={{ fontSize: '10px' }} className='box'>
            <Card.Header>
              <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
            </Card.Header>
            <Card.Img variant="top" src={img} />
            <Card.Body className='title'>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Card --->3
              </Card.Text>
            </Card.Body>
            <ListGroup className="list-group-flush">
              <ListGroup.Item>Cras justo odio</ListGroup.Item>
              <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
            </ListGroup>
            <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
          </Card>
        </Col>
      </Row>
    </>
  )
}
       
export default MovieList;

该方案会自动根据屏幕尺寸调整每行卡片数量，无需手动处理flex换行逻辑。

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