我正在研究React Project。我已经创建了卡,并从json数据中检索了数据。一切正常,除了预计将在行中对齐的项目。以下是代码和图片供参考
Project.js
{/* I have tried justifyItems, display and other,but, of no use */}
<MDBContainer style={{justifyItems: 'center',display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gridTemplateRows:'auto'}}>
<MDBRow >
<MDBCol md="4">
<MDBCard style={{ width: "22rem", borderRadius:'10px'}} >
{
data.map((data, index) => {
return <div key={index}>
<MDBCardImage className="img-fluid" src={data.img}
waves style={{borderRadius:'10px'}}
style={{height:'350px', width:'310px'}} />
<MDBCardBody>
<MDBCardTitle style={{color:'black'}}>{data.title} </MDBCardTitle>
<hr/>
<MDBCardText>
{data.content}
</MDBCardText>
<MDBBtn href="#">Github</MDBBtn>
<MDBBtn href="#">Live Demo</MDBBtn>
</MDBCardBody>
</div>
})
}
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
以下是图片