如何使Bootstrap+React卡片行居中？移动端单卡片需居中

问题原因 #

你当前的Card组件使用了col类，在移动端该列会占满父容器宽度，但卡片本身设置了固定宽度18rem，默认左对齐，导致视觉上没有居中。

解决方案 #

修改Card组件的外层容器类，结合Bootstrap的响应式列布局和flex居中类，实现移动端单卡片居中，同时保留桌面端的原有布局：

修改后的Card.js代码：

import React, { Component } from "react";

class Card extends Component{
    render(){
        return (
            <div className="col-md-4 col-sm-6 col-12 d-flex justify-content-center">
                <div className="card text-center" style={{ width: "18rem", marginTop: 40 }}>
                    <img src={this.props.immagine} className="card-img-top" alt={this.props.nome} />
                    <div className="card-body">
                        <h5 className="card-title">{this.props.nome}</h5>
                        <p className="card-text">
                            Prezzo = €{this.props.prezzo}
                        </p>
                        <button className="btn btn-dark">
                            Compra
                        </button>
                    </div>
                </div>
            </div>
        )
    }
}

export default Card;

代码说明 #

• col-md-4：桌面端（≥768px）每行显示3张卡片，保持原有布局
• col-sm-6：平板端（≥576px）每行显示2张卡片
• col-12：移动端（<576px）每行显示1张卡片，列占满整行
• d-flex justify-content-center：让列内的卡片水平居中，解决移动端左对齐问题

可选优化 #

如果想统一使用Bootstrap的间距类替代内联样式的marginTop:40，可以把style={{ width: "18rem", marginTop: 40 }}改成style={{ width: "18rem" }} className="mt-5"，mt-5对应Bootstrap的margin-top间距类，更符合框架规范。

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