材质 UI 网格方向 = 行不起作用

Question

我正在尝试使按钮网格按特定顺序对齐，但在将两个按钮设置在同一行时遇到了困难：

预期：

相反，row2（红色的两列）出现在列方向（第二列低于第一列，截图：http://prntscr.com/x4amxf）而不是像我期望的那样在行方向。

这是我的网格：

<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
  <Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine

  // picture represents this grid
  <Grid item container direction="row" spacing={1}>
    <Grid align="center" direction="row" justify="center" item container xs={1}>
      <Grid item container direction="column">
        <Grid item></Grid>
        <Grid item></Grid>
      </Grid>
      <Grid item container direction="column">
        <Grid item></Grid>
        <Grid item></Grid>
      </Grid>
    </Grid>
  </Grid> 
</Grid>

我试图将 xs 增加到 2 以查看它是否是尺寸问题，但它只是拉伸了项目。

和实际的代码（但上面的结构表示的一样）：

<Grid container direction="column">
  <Grid item container>
  </Grid>
  <Grid item container direction="row" spacing={1}>
    <Grid item>
      <AddPrice open={open} handleClosePopup={handleClose} item={item} />

      <IconButton variant="contained" onClick={handleClose}>
        <AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
        <Typography>Цена</Typography>
      </IconButton>
    </Grid>
    {item.prices.map(({ price, quantity }) => (
      <React.Fragment key={`itemPrice1${price}`}>
        <Grid align="center" direction="row" justify="center" item container xs={1}>
          <Grid item container direction="column">
            <Grid item>
              <Button>
                <Grid item direction="column" container>
                  <Grid item>
                    <Typography variant="button">{price} лв.</Typography>
                  </Grid>
                  <Grid item>
                    <Typography variant="button">
                      {quantity.available} {item.quantity.type}.
                    </Typography>
                  </Grid>
                </Grid>
              </Button>
            </Grid>
          </Grid>
          {editing && (
            <Grid item container direction="column">
              <Grid item>
                <IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
                  <DeleteForever color="secondary" style={{ fontSize: 30 }} />
                </IconButton>
              </Grid>
              <Grid item>
                <IconButton style={{ border: "1px solid #3f51b5" }}>
                  <EditIcon color="primary" style={{ fontSize: 30 }} />
                </IconButton>
              </Grid>
            </Grid>
          )}
        </Grid>
      </React.Fragment>
    ))}
  </Grid>
  <Grid item container></Grid>
</Grid>

基本上，编辑按钮应该出现在价格按钮的右侧。

沙盒：https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js

Answer 1

如果我正确理解了这个任务，你必须像这样重构你的布局：

    <Grid container direction="column">
      <Grid item container direciton="row">
        Row1
      </Grid>
      <Grid align="center" direction="row" container>
        <Grid item xs={2} style={{ border: "1px solid black" }}>
          <Grid item>BR</Grid>
          <Grid item>TXT</Grid>
        </Grid>
        <Grid item xs={2} style={{ border: "1px solid black" }}>
          <Grid item>EDIT</Grid>
          <Grid item>DELETE</Grid>
        </Grid>
      </Grid>
    </Grid>

请查看the example