如何在Bootstrap的Row元素内居中卡片内容？

算力阿峰

2026-8-8

解决Bootstrap Row内卡片居中且间距不均的问题

问题代码：

<Row className="d-flex justify-content-center">
  {cardData.map((data) => {
    return (
      <Col>
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src={data.img} />
          <Card.Body>
            <Card.Title>{data.title}</Card.Title>
            <Card.Text>{data.text}</Card.Text>
            <Button variant="primary">{data.button}</Button>
          </Card.Body>
        </Card>
      </Col>
    );
  })}
</Row>

显示问题：卡片左右间距不均，无法在Row内正常居中。

解决方案1：给Col添加`col-auto`类

Bootstrap默认的Col会自动填充可用宽度，导致justify-content-center的居中逻辑失效。给Col添加col-auto类，让它仅包裹卡片内容，Row的居中样式就能正常生效：

<Row className="d-flex justify-content-center">
  {cardData.map((data) => {
    return (
      <Col className="col-auto">
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src={data.img} />
          <Card.Body>
            <Card.Title>{data.title}</Card.Title>
            <Card.Text>{data.text}</Card.Text>
            <Button variant="primary">{data.button}</Button>
          </Card.Body>
        </Card>
      </Col>
    );
  })}
</Row>

解决方案2：移除Col，直接在Row中放置卡片

如果不需要Col的响应式布局特性，可以直接将卡片放在Row内，通过给卡片添加横向margin来控制间距：

<Row className="d-flex justify-content-center">
  {cardData.map((data) => {
    return (
      <Card className="mx-2" style={{ width: "18rem" }}>
        <Card.Img variant="top" src={data.img} />
        <Card.Body>
          <Card.Title>{data.title}</Card.Title>
          <Card.Text>{data.text}</Card.Text>
          <Button variant="primary">{data.button}</Button>
        </Card.Body>
      </Card>
    );
  })}
</Row>