我如何將它變成一行中的 4 列並且還具有響應性？

Question

我有這個Grid和Card ，我想把它變成一行 4 列。 目前，第 4 列位於第 2 行，如下所示：

我想將 4 列放在一行中。

另外，如果它在小屏幕上，為什么它看起來像這樣？ 列沒有排列。

codesandbox鏈接： 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

所以你必須對你的孩子Grid做的是，而不是md={4} ，給它md={3} （所以對於中等和以上尺寸的屏幕，所有 4 將在單行中）。 或者，如果您希望 md 保持為 4，則為所有添加另一個lg={3}斷點。

該行有 12 列，因此每個 4 列的 3 個項目 (3*4 =12) 或每個 3 列的 4 個項目。 請牢記 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