Material UI响应式Grid组件移动端不堆叠问题求助

问题根源 #

你给Grid Item设置的是xs={6}，这会让**所有屏幕尺寸（包括移动端）**下的每个输入框都占据Grid容器的6/12宽度，所以始终保持并排显示。

修复方案 #

给Grid Item设置响应式断点，让移动端占满整行，小屏及以上尺寸保持两列布局：

修改后的核心代码 #

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField
      variant="outlined"
      id="first-name-input"
      label="First Name"
      defaultValue=""
      fullWidth
    />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField
      variant="outlined"
      id="last-name-input"
      label="Last Name"
      fullWidth
    />
  </Grid>
</Grid>
<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <TextField
      variant="outlined"
      id="phone-number-input"
      label="Phone Number"
      defaultValue=""
      fullWidth
    />
  </Grid>
  <Grid item xs={12} sm={6}>
    <TextField
      variant="outlined"
      id="email-input"
      label="Email Address"
      fullWidth
    />
  </Grid>
</Grid>

逻辑说明 #

• xs={12}：在宽度<600px的移动端，每个输入框占满整行，自动垂直堆叠
• sm={6}：在宽度≥600px的屏幕上，每个输入框占一半宽度，维持原有的并排布局

这样既保留了大屏的两列展示，又实现了移动端的响应式堆叠效果。

内容的提问来源于stack exchange，提问作者Angela Rubchinksy