连续三张卡，而不是一列中的所有卡 [英] Three cards in a row instead of all cards in one column

问题描述

我正在使用材质 UI 进行反应，我在一个阵列中有40张动态卡，当我渲染它们时，我想连续拥有3张卡，并且将所有卡都放在一列中.我正在使用此卡: https://codesandbox.io/s/r084q99q34

I'm using react with material UI, I have 40 dynamic cards in an array and when I render them , I want to have 3 cards in a row and I get all the cards in one column. I'm using this card: https://codesandbox.io/s/r084q99q34

推荐答案

也许你可以使用 Flexbox ?我遇到了同样的问题，由于FlexBox槽材料ui，我得以解决.另外，请确保使用高于或等于4的材料核心版本.希望对您有所帮助！

Maybe you can use Flexbox ? I had the same problem and I resolved it thanks to FlexBox trough material ui. Also, be sure to use a material core version superior or equal to 4. Hope it helps !

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import {
    Grid,
    Card,
    CardContent,
    Typography,
    CardHeader
} from '@material-ui/core/'

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        padding: theme.spacing(2)
    }
}))

export default function AltCard() {
    const classes = useStyles()
    const data = [
        { quarter: 1, earnings: 13000 },
        { quarter: 2, earnings: 16500 },
        { quarter: 3, earnings: 14250 },
        { quarter: 4, earnings: 19000 }
    ]
    return (
        <div className={classes.root}>
            <Grid
                container
                spacing={2}
                direction="row"
                justify="flex-start"
                alignItems="flex-start"
            >
                {data.map(elem => (
                    <Grid item xs={12} sm={6} md={3} key={data.indexOf(elem)}>
                        <Card>
                            <CardHeader
                                title={`quarter : ${elem.quarter}`}
                                subheader={`earnings : ${elem.earnings}`}
                            />
                            <CardContent>
                                <Typography variant="h5" gutterBottom>
                                    Hello World
                                </Typography>
                            </CardContent>
                        </Card>
                     </Grid>
                ))}
            </Grid>
        </div>
    )
}

这篇关于连续三张卡，而不是一列中的所有卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！