Bootstrap 5 类“col-md-4”不起作用答案

【问题标题】：Bootstrap 5 class "col-md-4 " is not workingBootstrap 5 类“col-md-4”不起作用
【发布时间】：2021-07-15 20:24:29
【问题描述】：

我想使用 Bootstrap 卡制作一个 3 列和 2 行的网格，但网格不工作。所有的卡片都居中，一张接一张。请帮我解决这个问题。

Service.jsx

const Service =() =>{
    return(
      <div>
        <div className="my-5">
          <h1 className="text-center">Our Services</h1>
        </div>
        <div className="container-fluid mb-5">
          <div className="row">
            <div className="col-10 mx-auto">
              <div className="row gy-3">
                {Sdata.map((val, ind) => {
                    return(
                      <Card key={ind} imgsrc={val.imgsrc} title={val.title} />
                    )})}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

Card.jsx

const Card =(props) =>{
    return(
      <div>
            <div className="col-md-4 col-10 mx-auto">
                <div className="card">
                    <img src={props.imgsrc} className="card-img-top" alt={props.imgsrc} />
                        <div className="card-body">
                            <h5 className="card-title font-weight-bold">{props.title}</h5>
                            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <NavLink to="#" className="btn btn-primary">Go somewhere</NavLink>
                        </div>
                </div>
            </div>
        </div>  
    );
  };

【问题讨论】：

对于 Bootstrap 5 你只需要使用col-5

标签： html css reactjs bootstrap-5

【解决方案1】：

“所有卡片都居中，一张接一张”。

列被外部div 包裹。列必须直接位于父 .row 中。移除外层 div。

const Card =(props) =>{
    return(
            <div className="col-md-4 col-10 mx-auto">
                <div className="card">
                    <img src={props.imgsrc} className="card-img-top" alt={props.imgsrc} />
                        <div className="card-body">
                            <h5 className="card-title font-weight-bold">{props.title}</h5>
                            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <NavLink to="#" className="btn btn-primary">Go somewhere</NavLink>
                        </div>
                </div>
            </div>
    );
  };

React demo on Codeply

【讨论】：