时间戳

首页 > 解决方案 > .map 堆叠卡片而不是并排放置

reactjs - .map 堆叠卡片而不是并排放置

问题描述

我试图让投资组合页面的卡片在更大的屏幕上并排放置，然后在断点处堆叠，无法让它工作。我正在使用材质ui。我已经多次更改代码，这就是它现在的位置。

return (
        <>
            <Navbar />
            <Box component='div' className={classes.portfolioContainer}>
                {projectInfo.map((lsItem, key) => (
                    <Grid container
                        justify='center'
                        key={key}
                        xs={10}
                        sm={4}
                        md={5}
                        >
                        <Card className={classes.cardContainer}>
                            <CardActionArea>
                                <CardMedia
                                    component='img'
                                    alt={lsItem.projectAltImg}
                                    height='280'
                                    image={lsItem.projectImg}
                                />
                                <CardContent className={classes.textContainer}>
                                    <Typography gutterBottom variant='h5' className={classes.textColor}>
                                        {lsItem.projectTitle}
                                    </Typography>
                                    <Typography variant='body2' color='textSecondary' component='p' className={classes.textColor}>
                                        {lsItem.ProjectDescription}
                                    </Typography>
                                </CardContent>
                                <CardActions style={{ display: 'flex', justifyContent: 'center', background: '#304D6D' }}>
                                    <IconButton
                                        size='small'
                                        className={classes.buttonContainer}
                                        style={{ background: '#69DC9E' }}
                                        href={lsItem.ProjectGitHub} target='_blank'
                                    >
                                        <GitHub style={{ color: '#BA5A31' }} />
                                    </IconButton>
                                    <IconButton
                                        size='small'
                                        className={classes.buttonContainer}
                                        style={{ background: '#69DC9E' }}
                                        href={lsItem.ProjectLiveSite} target='_blank'
                                    >
                                        <Language style={{ color: '#BA5A31' }} />
                                    </IconButton>
                                </CardActions>
                            </CardActionArea>
                        </Card>
                    </Grid>
                ))}
            </Box>
        </>
    )

标签： reactjsmaterial-ui

解决方案

您没有Grid正确使用该组件。我建议你看看官方文档。

简而言之，这就是它应该如何工作

<Grid container>
  {projectInfo.map((lsItem, key) => (
    <Grid item>
      <Card />
    </Grid>
  ))}
</Grid>

推荐阅读