我如何将它变成一行中的 4 列并且还具有响应性？

Question

我有这个Grid和Card，我想把它变成一行4列。目前，第 4 列位于第 2 行，如下所示：

我想把 4 列放在一行中。

另外，如果是在小屏幕上，为什么会变成这样？列没有排列。

codesandbox link: https://codesandbox.io/s/4-boxes-in-one-row-0mym3j?file=/demo.js

代码：

 <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}>
            <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} order={{ xs: 3, sm: 2 }}>
            <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} order={{ xs: 2, sm: 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} order={{ xs: 2, sm: 3 }}>
            <Card>
              <CardContent>
                <Stack direction="row" spacing={2}>
                  <Typography variant={"h6"} gutterBottom>
                    Column 4
                  </Typography>
                </Stack>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </Container>

Answer 1

所以你必须对你的 child Grid 做的是，而不是 md={4}，给它 md={3}（所以对于中等和以上尺寸的屏幕，所有 4将在单行中）。或者，如果您希望 md 保持为 4，则为所有添加另一个 lg={3} 断点。

该行有 12 列，因此可以是 3 项，每项 4 列 (3*4 =12)，也可以是 4 项，每项 3 列。请牢记 12 条规则。在较小的屏幕上，它会自动换行。

现在 sm={6} 意味着在小屏幕上只有 2 个项目会在一行中，下一个会换行。所以响应很好。如果你也想在小屏幕上使用 4，那么你也必须做 sm={3}。

所以你这一行会改变：

<Grid item xs={12} sm={6} md={3}>  <======== md=3 OR

<Grid item xs={12} sm={6} md={4} lg={3}> <======= lg=3 added and md remain same

我如何将它变成一行中的 4 列并且还具有响应性？

How do I make this into 4 column in one row and also responsive as well?

javascript

reactjs

material-ui