无论内容如何，​​保持相同高度的卡片

问题描述

我正在创建带有上传的图片，文字和说明的卡片。我尝试了不同的方法，但无法解决此问题。如果一张卡的内容很长，我的卡就会失去网格模式。对于前

我想要的

卡片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 (将#修改为@）