第二个 Material-UI 卡片的蓝色 CardActions 部分没有停留在底部，这使得页面看起来不简洁。
我已经尝试将 CardContent 的高度设置为 100%，但没有任何改变。
我创建了一个沙箱来说明问题：
https://codesandbox.io/s/happy-glitter-7vyep
我希望 Material-UI CardAction 始终位于容器的底部，无论 CardContent 中有多少项。
如何让 Material-UI CardActions 始终贴在父级底部
IT技术
reactjs
material-ui
2021-05-21 08:53:09
2个回答
您必须将以下属性添加到 .MuiCard-root
.MuiCard-root{
display: flex;
flex-direction: column;
justify-content: space-between;
}
Other Method is :
.MuiCard-root{
display: flex;
flex-direction: column;
}
.MuiCardActions-root{
margin-top: auto;
}
接受的答案将使卡片内的内容居中。这通常会导致不希望的对齐问题。相反，如果您希望 CardContent 保持 CardHeader 下方的正常间距，并将操作“推”到卡片底部，则这种方式效果更好。
CSS
.MuiCard-root{
display: flex;
flex-direction: column;
}
卡片
<Card>
<CardHeader>...</CardHeader>
<CardContent>...></CardContent>
<div className={"flex-grow"} />
<CardActions>...</CardActions>
</Card>
请注意，此示例使用带有“flex-grow”属性的 tailwindcss。如果您不使用顺风，只需确保 div 已flex-grow:1应用于它。
其它你可能感兴趣的问题