当窗口宽度小于 600px 时如何禁用 MUI Grid 项堆叠

【问题标题】：How to disable MUI Grid items from stacking when window width is smaller than 600px当窗口宽度小于 600px 时如何禁用 MUI Grid 项堆叠
【发布时间】：2021-10-25 14:40:53
【问题描述】：

我正在使用 MUI Grid 组件进行布局。我将两个网格项目并排放置，并在其下方放置一个。但是，当我调整窗口大小并且宽度变得小于600px 时，彼此相邻的两个网格项将堆叠。有人知道我可以在哪里禁用 600px 窗口宽度下堆叠的两个网格项吗？

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

您可以查看默认断点值here 以了解xs 或sm 是什么。在Grid项目中，xs={12} sm={6}表示当屏幕小于sm（600px）时，网格项目跨越12列（100%宽度），当它小于md且大于xs时，网格项跨越 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>

【讨论】：