當窗口寬度小於 600px 時，如何禁用 MUI Grid 項目堆疊

Question

我正在使用 MUI Grid組件進行布局。 我將兩個網格項目並排放置，一個放置在其下方。 但是，當我調整窗口大小並且寬度變得小於600px ，彼此相鄰的兩個網格項將堆疊。 有人知道我在哪里可以禁用600px窗口寬度下堆疊的兩個網格項目嗎？

Answer 1

您可以在 此處查看默認斷點值以了解xs或sm是什么。 在Grid item 中， xs={12} sm={6}表示當屏幕小於sm ( 600px ) 時，grid item 跨越 12 列（100% 寬度），當它小於md且大於xs ，grid item跨越 6 列（50% 寬度）

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <Item>xs=12 sm=6</Item>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Item>xs=12 sm=6</Item>
  </Grid>
  <Grid item xs={12}>
    <Item>xs=12</Item>
  </Grid>
</Grid>

編輯：當寬度小於600px時禁用堆疊：

<Grid container spacing={2}>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs={12}>
    <Item>xs=12</Item>
  </Grid>
</Grid>