如何实现Bootstrap Cards在网站中居中且间距均匀？

问题 #

开发基于Bootstrap的React应用时，遇到卡片布局问题：一行三张卡片间距过大，整体未在页面正确居中，尝试Bootstrap Grid Layout未达预期效果。

现有Card组件代码 #

import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import ListGroup from 'react-bootstrap/ListGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import './Card.css';

function KitchenSinkExample() {
    return (
        <Container fluid className="mt-4 text-center">
            <Row xs={1} md={3} className="g-4 justify-content-center">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Col key={idx} className="mb-4">
                        <Card style={{ width: '18rem' }}>
                            <Card.Img variant="top" src={`holder.js/100px180?text=Image cap ${idx + 1}`} className='card-img-top' />
                            <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>
                            <ListGroup className="list-group-flush">
                                <ListGroup.Item>Cras justo odio</ListGroup.Item>
                                <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                                <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                            </ListGroup>
                            <Card.Body>
                                <Button variant="primary" className='chat-button'>Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

export default KitchenSinkExample;

对应CSS代码 #

.btn-primary {
    background-color: #0074cc !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 20px !important;
    width: 65% !important;
    font-size: 20px !important;
    margin-bottom: 10px;
}

.card {
    padding: 1.5em .5 .5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

.card-title {
    font-weight: bold;
    font-size: 1.5em;
}

.card-img-top {
    width: 60%;
    border-radius: 50%;
    padding: 1em;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.chat-button:hover {
    background-color: #fff !important;
    color: #0074cc !important;
}

解决方案 #

1. 调整容器与行配置，解决整体居中问题 #

• 移除Container的fluid属性：fluid会让容器占满整个视口宽度，改用默认Container（带固定宽度，自动居中），无需额外添加居中类。
• 删除Row的justify-content-center：使用md={3}时，Col会自动均分行宽度，该类会导致列布局偏移，改用g-*类精准控制列间距。

修改后的容器与行代码：

<Container className="mt-4">
    <Row xs={1} md={3} className="g-3">
        {/* 卡片内容 */}
    </Row>
</Container>

2. 修复卡片宽度与内边距问题 #

• 去掉Card的固定宽度style={{ width: '18rem' }}：让卡片自适应Col的宽度，避免固定宽度导致Col空间浪费、间距过大。
• 修正.card类的内边距语法错误：原代码padding: 1.5em .5 .5em缺少单位，改为padding: 1.5em 0.5em 0.5em，确保内边距正确生效。

修改后的Card组件：

<Card>
    {/* 卡片内容 */}
</Card>

修正后的CSS：

.card {
    padding: 1.5em 0.5em 0.5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

3. 优化响应式与间距控制 #

• 保留xs={1}确保移动端每行显示1张卡片，md={3}在中等屏幕及以上每行3张，保证响应式适配。
• 调整Row的g-3（可改为g-2或g-4）控制列之间的间距，数值越小间距越紧凑，按需调整即可。

最终完整代码 #

JSX部分

import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import ListGroup from 'react-bootstrap/ListGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import './Card.css';

function KitchenSinkExample() {
    return (
        <Container className="mt-4">
            <Row xs={1} md={3} className="g-3">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Col key={idx} className="mb-4">
                        <Card>
                            <Card.Img variant="top" src={`holder.js/100px180?text=Image cap ${idx + 1}`} className='card-img-top' />
                            <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>
                            <ListGroup className="list-group-flush">
                                <ListGroup.Item>Cras justo odio</ListGroup.Item>
                                <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                                <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                            </ListGroup>
                            <Card.Body>
                                <Button variant="primary" className='chat-button'>Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </Container>
    );
}

export default KitchenSinkExample;

CSS部分

.btn-primary {
    background-color: #0074cc !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 20px !important;
    width: 65% !important;
    font-size: 20px !important;
    margin-bottom: 10px;
}

.card {
    padding: 1.5em 0.5em 0.5em;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
    border-radius: 2em;
}

.card-title {
    font-weight: bold;
    font-size: 1.5em;
}

.card-img-top {
    width: 60%;
    border-radius: 50%;
    padding: 1em;
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
}

.chat-button:hover {
    background-color: #fff !important;
    color: #0074cc !important;
}

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