Reactjs 物料界面复选框“；“跳跃”；网格中

“我的材质UI可折叠”中的以下网格结构是我所需的布局：

我已经尝试过通过使用弯曲方向来改变布局

当我点击复选框时，最后一个复选框倾向于从它的位置“跳转”，并将自己堆叠在另外两个复选框下。目前我找不到原因。您可以在此图片上看到此行为的结果：

在较小的屏幕上，这种行为是可以的，但特别是在较大的屏幕上，我想要两列布局，其中第一列包含两个复选框，第二列包含第三个复选框。

尝试以下方法：

  <ExpansionPanelDetails className={classes.details}>
    <Typography paragraph>Exmaple text</Typography>
    <Grid container justify="space-between" direction="row">
      <Grid container item justify="space-between" xs={6}>
        <Grid container item style={{ alignItems: "center" }} direction="row">
          <Grid item xs={6}>Text Supervisor</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="supervisor" />
          </Grid>
        </Grid>
        <Grid container item style={{ alignItems: "center" }}>
          <Grid item xs={6}>Text Employee</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="employee" />
          </Grid>
        </Grid>
      </Grid>

      <Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
        <Grid container item style={{ alignItems: "center" }}>
          <Grid item xs={6}>Text Employee</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="employee" />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  </ExpansionPanelDetails>

Exmaple文本
文本主管
短信员工
短信员工

---

我对js/material ui/react这个东西比较陌生，所以你可能会进一步改进它。

@Radosław Cybulski:谢谢你的帮助。通过你的代码和一些修改，我能够让它工作。您不必指定direction=“row”，因为这是默认设置

现在看起来是这样的：

<ExpansionPanelDetails className={classes.details}>
    <Typography paragraph>
      Example text
    </Typography>
    <Grid container justify="space-between">
        <Grid container item xs={6} md={3}>
            <Grid
                container
                item
                style={{
                    alignItems: "center",
                    paddingBottom: "8px",
                }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    Text Supervisor
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="supervisor" />
                </Grid>
            </Grid>
            <Grid
                container
                item
                style={{ alignItems: "center" }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    Text Employee
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="employee" />
                </Grid>
            </Grid>
        </Grid>

        <Grid
            container
            item
            xs={6}
            md={3}
            style={{ alignContent: "center" }}
            direction="row"
        >
            <Grid
                container
                item
                style={{ alignItems: "center" }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    {useTranslation("employee")}
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="employee" />
                </Grid>
            </Grid>
        </Grid>
        <Hidden smDown>
            <Grid container item md={6} />
        </Hidden>
    </Grid>
</ExpansionPanelDetails>

示例文本
文本主管
短信员工
{使用翻译（“员工”）}