如何将 MDBootstrap 卡排成一排?
How to grid MDBootstrap cards in one row?
我在我的 React 中使用了 MDBootstrap 卡片 project.I'我发现很难在一行中对齐。对齐 3 张卡片是预期的,但是卡片只卡在垂直位置。请参阅下面的代码以供参考。
<MDBContainer>
<MDBRow >
<MDBCol >
<MDBCard style={{ width: "18rem", 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>
<br/>
</div>
})
}
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
下面是图片。这就是我得到的最终结果。有什么解决办法吗?
您在行内只有 1 列,并且仅在列内迭代数据,这导致单列堆叠格式。您的迭代应该 return 分隔列,例如:
<MDBRow>
{
data.map((data, index) => {
return <MDBCol key={index}>
<MDBCard style={{ width: "18rem", borderRadius:'10px'}}>
<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>
</MDBCard>
</MDBCol>
})
}
</MDBRow>
我在我的 React 中使用了 MDBootstrap 卡片 project.I'我发现很难在一行中对齐。对齐 3 张卡片是预期的,但是卡片只卡在垂直位置。请参阅下面的代码以供参考。
<MDBContainer>
<MDBRow >
<MDBCol >
<MDBCard style={{ width: "18rem", 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>
<br/>
</div>
})
}
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
下面是图片。这就是我得到的最终结果。有什么解决办法吗?
您在行内只有 1 列,并且仅在列内迭代数据,这导致单列堆叠格式。您的迭代应该 return 分隔列,例如:
<MDBRow>
{
data.map((data, index) => {
return <MDBCol key={index}>
<MDBCard style={{ width: "18rem", borderRadius:'10px'}}>
<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>
</MDBCard>
</MDBCol>
})
}
</MDBRow>