如何在 Material UI React Component 中使按钮粘在底部？

Question

我正在为 Web 应用程序构建总体布局。 我遇到了一个我不知道如何解决的问题。

我的网格如下所示：

我想要的是卡片内的每个部分都从同一点开始。

例如，图标没问题，因为它们的顶部是对齐的。

标题也可以，因为它们的顶部是对齐的。

但是，内容文本不好，因为三张卡片的顶部没有对齐。

此外， learn more按钮也应对齐，最好贴在卡片底部。 可以看出，他们都坐在不同的高度。

我的代码如下所示：

HomeGrid.jsx ：

import React, { useState, useEffect, Fragment } from 'react'

import { useStyles } from '../styles'

import SimpleCard from '../card/SimpleCard'

import { Grid, Container, Paper } from '@material-ui/core'
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'
import FindInPageIcon from '@material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'

const HomeGrid = () => {
    const classes = useStyles()
    return (
        <Container disableGutters className={classes.homeGridContainer}>
            <Grid
                alignItems="stretch"
                alignContent="center"
                justify="center"
                wrap="wrap"
                container
                spacing={10}
            >
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<QuestionAnswerIcon fontSize={'large'} />}
                        title={'Speak'}
                        content={'Speaking to someone can help blah blah'}
                    ></SimpleCard>
                </Grid>
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<FindInPageIcon fontSize={'large'} />}
                        title={'Finding someone like this example can be great'}
                        content={'Finding to someone can help blah blah'}
                    ></SimpleCard>
                </Grid>
                <Grid item xs={12} md={4} align="center">
                    <SimpleCard
                        icon={<AccountBalanceWalletIcon fontSize={'large'} />}
                        title={'No Fees Here'}
                        content={'No Fees shalt find thou'}
                    ></SimpleCard>
                </Grid>
            </Grid>
        </Container>
    )
}

export default HomeGrid

SimpleCard.jsx :

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { CardActionArea, CardMedia } from '@material-ui/core'

import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'

const useStyles = makeStyles({
    simpleCard: {
        minWidth: 275,
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 14,
    },
    pos: {
        marginBottom: 12,
    },
})

const SimpleCard = (props) => {
    const classes = useStyles()

    return (
        <Card style={{ height: '100%' }}>
            <CardContent>
                {props.icon}
                <Typography variant="h6" component="h2">
                    {props.title}
                </Typography>
                <Typography variant="body1" component="p">
                    {props.content}
                </Typography>
            </CardContent>
            <CardActions className={classes.actions}>
                <Button size="small">Learn More</Button>
            </CardActions>
        </Card>
    )
}

export default SimpleCard

我已经尝试实现这个答案： 在此处输入链接描述，但如您所见，它不起作用。

有人可以在这里指导/帮助我吗？

Answer 1

使用flex将解决这个问题。
设置 flex 样式属性display:'flex', justiyContent:'space-between', flexDirection:'column'到Card组件。
它会将所有Card的按钮移动到Card的底部。