React Bootstrap卡片无法实现3列网格布局及间距问题求助

你的代码里存在几个关键错误，导致卡片无法按预期排列，修正后即可实现每行3列的网格布局：

问题根源 #

• 属性拼写错误：所有classNameName均写错为className，这直接导致Bootstrap的row、row-cols-3、col等布局类完全失效，卡片自然堆叠显示。
• 容器样式冲突：给<Container>添加的display: flex会干扰Bootstrap原生网格的布局逻辑，需要移除。
• 固定宽度限制：手动设置卡片width: '15rem'会限制布局弹性，建议通过Col组件自动控制卡片宽度，适配不同屏幕。

修正后的代码 #

//import logo from './logo.svg';
import './App.css';
import movie1 from './images/movie1.jpg';
import movie2 from './images/movie2.jpg';
import movie3 from './images/movie3.jpg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col, Card } from 'react-bootstrap';

function App() {
  return (
    <>
      <Container fluid style={{ marginTop: "20px", backgroundColor: "lightblue", padding: "20px" }}>
        {/* 使用React Bootstrap Row组件，配置响应式列数和间距 */}
        <Row className="row-cols-1 row-cols-md-3 gx-4 gy-4">
          {/* 示例卡片1 */}
          <Col>
            <Card>
              <Card.Img variant="top" src={movie1} alt="Movie" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of the card's content.
                </Card.Text>
              </Card.Body>
              <ul className="list-group list-group-flush">
                <li className="list-group-item">An item</li>
                <li className="list-group-item">A second item</li>
                <li className="list-group-item">A third item</li>
              </ul>
            </Card>
          </Col>
          {/* 示例卡片2 */}
          <Col>
            <Card>
              <Card.Img variant="top" src={movie2} alt="Movie" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of the card's content.
                </Card.Text>
              </Card.Body>
              <ul className="list-group list-group-flush">
                <li className="list-group-item">An item</li>
                <li className="list-group-item">A second item</li>
                <li className="list-group-item">A third item</li>
              </ul>
            </Card>
          </Col>
          {/* 示例卡片3 */}
          <Col>
            <Card>
              <Card.Img variant="top" src={movie3} alt="Movie" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up the bulk of the card's content.
                </Card.Text>
              </Card.Body>
              <ul className="list-group list-group-flush">
                <li className="list-group-item">An item</li>
                <li className="list-group-item">A second item</li>
                <li className="list-group-item">A third item</li>
              </ul>
            </Card>
          </Col>
          {/* 复制上述Col结构，补充剩余6张卡片即可 */}
        </Row>
      </Container>
    </>
  );
}

export default App;

核心优化说明 #

1. 使用React Bootstrap原生组件：用<Row>、<Col>、<Card>替代手动拼接div+类，避免拼写错误，同时更好地兼容Bootstrap布局逻辑。
2. 响应式适配：row-cols-1 row-cols-md-3实现移动端每行1列、平板及以上设备每行3列的自适应布局。
3. 间距控制：gx-4 gy-4分别控制列之间的水平间距和行之间的垂直间距，数值范围0-5，可按需调整。
4. 移除冲突样式：删除Container上的display: flex和justifyContent: center，让Bootstrap网格系统正常工作。

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