如何解决无论内容如何,保持相同高度的卡片
我正在创建带有上传的图片,文字和说明的卡片。我尝试了不同的方法,但无法解决此问题。如果一张卡的内容很长,我的卡就会失去网格模式。对于前
我想要的
卡片1 -----卡片2 -------卡片3
卡片4 -----卡片5 -------卡片6
卡7
我会得到什么(当卡片4的文字较长时)
卡1 -------卡2 ------卡3
卡片4 ----------------------------
----------------卡5 ------卡6
import React from 'react';
import classes from './Cards.module.css';
import {Card,Button,CardDeck} from 'react-bootstrap';
const Cardm = (props) => {
return (
<div className={classes.cardPattern}>
<CardDeck>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={props.image} />
<div className={classes.textBackground}><Card.Body>
<Card.Title>{props.title}</Card.Title>
<Card.Text>
{props.text}
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body></div>
</Card>
</CardDeck>
</div>
);
};
export default Cardm;
css文件-
.cardPattern{
float: left;
margin: 10px;
border-color: black;
}
.textBackground {
color: #fffdd0;
background-color: #2C2B2B;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。