材质 UI 中的相同高度卡片

Question

尝试使用 3 张水平卡片但高度相同并且反应灵敏。

喜欢

卡 A |卡 B |卡 C

原文由 Panayiotis Georgiou 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须将以下属性添加到您的 Card

 .MuiCard-root.same-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

它会在 CardContent 和 CardActions 之间添加必要的空间

此处回答了相同的问题： 如何使 Material-UI CardActions 始终粘在父级的底部

原文由 DarkAngel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为这是一种更简单的方法：

https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues/45#issuecomment-442885173

 import React from "react"
import { Card, CardBody, CardFooter } from "components"

import withStyles from "@material-ui/core/styles/withStyles"

const styles = {
fullHeightCard: {
    height: "100%",
    },
}

const Item = (props) => {
    const {classes} = props

    // 1-5 paragraphs to create card height variance
    let paragraphs = 1 + Math.floor(Math.random() * Math.floor(5))

    return (
        <Card className={classes.fullHeightCard}>
            <CardBody>
                {Array(paragraphs).fill().map((_,i) => (
                    <p>{i+1}</p>
                ))}
            </CardBody>
            <CardFooter>
            {'Footer content'}
            </CardFooter>
        </Card>
    )
}

export default withStyles(styles)(Item)

原文由 Rodrigo Cipriani da Rosa 发布，翻译遵循 CC BY-SA 4.0 许可协议