使用 Material-UI 网格，我怎样才能将它们变成一行中的 5 列？

Question

我有这 5 列，我希望它们排成一行。然而，到目前为止，这就是我得到的：

如何使所有列都在一行中？

我也在我的 codesandbox 中重新创建了这个：https://codesandbox.io/s/5-columns-in-one-row-0mym3j

代码如下：代码：

<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
      <Box sx={{ "& h1": { m: 0 } }}>
        <Grid container spacing={2} justify="flex-start">
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 1
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 2
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 3
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 4
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 5
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Container>

Answer 1

您可以使用 wrap="nowrap" 使项目保持在同一行。

<Grid container wrap="nowrap" sx={{ flexDirection: { xs: "column", md: "row" }}} spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
        <Card>
          .
          .
          .
        </Card>
      </Grid>
</Grid>

使用 Material-UI 网格，我怎样才能将它们变成一行中的 5 列？

With the Material-UI Grid, how can I make these into 5 columns in one row?

javascript

reactjs

material-ui