-6ren">
gpt4 book ai didi

html - Bootstrap 5 类 "col-md-4 "不工作

转载 作者:行者123 更新时间:2023-12-04 14:54:21 24 4
gpt4 key购买 nike

我想使用 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>
);
};

最佳答案

"All the cards are centered and one after the other".

列被外部 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

关于html - Bootstrap 5 类 "col-md-4 "不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68393450/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com