当其余的应该是 MaterialUI Grid 中的列时，如何将两个项目作为行放在一列中？

Question

我想把我的箭头放在一个在上面，第二个在下面的地方。我怎样才能在 MaterialUI 网格中做到这一点？

下面我附上了我现在拥有的和我想要达到的目标的照片。

我的代码：

<Paper className={classes.paper}>
      
    <Grid container spacing={2}>
      <!-- here -->
      <Grid item>
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
      </Grid>
      <Grid item>
        <ButtonBase className={classes.image}>
            <ArrowDownwardIcon/>
        </ButtonBase>
      </Grid>
     <!-- end-->
      <Grid item>
        <ButtonBase className={classes.image}>
          <img className={classes.img} alt="complex" src="https://amadeuscontenthub.pl/wp-content/uploads/2019/08/Silhouette-of-an-airplane-just-after-take-off-during-sunset-640x377.jpg" />
        </ButtonBase>
      </Grid>
      <Grid item xs={12} sm container>
        <Grid item xs container direction="column" spacing={2}>
          <Grid item xs>
            <Typography gutterBottom variant="subtitle1">
                {ArticlePreview.title}
            </Typography>
            <Typography variant="body2" gutterBottom>
                {ArticlePreview.description}
            </Typography>
          </Grid>
          <Grid item>
            <Typography variant="body2" style={{ cursor: 'pointer' }}>
                <MessageIcon/> 2137 comments
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  </Paper>

Answer 1

试试这个

    <Grid container item direction="column">
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
        <ButtonBase className={classes.image}>
            <ArrowUpwardIcon/>
        </ButtonBase>
    </Grid>

Answer 2

解决此问题的一个简单方法是在主父网格容器内创建另一个 Grid 容器。然后在那个新容器中将这两个图标作为网格项。

{/* <!-- here --> */}
<Grid item style={{ alignSelf: "center" }}>
  <Grid container direction="column">
    <Grid item>
      <ButtonBase className={classes.image}>
        <ArrowUpward />
      </ButtonBase>
    </Grid>
    <Grid item>
      <ButtonBase className={classes.image}>
        <ArrowDownward />
      </ButtonBase>
    </Grid>
  </Grid>
</Grid>
{/* <!-- end--> */}

这是一个工作演示：

当其余的应该是 MaterialUI Grid 中的列时，如何将两个项目作为行放在一列中？

How to put two items in one column as rows when rest should be columns in MaterialUI Grid?

javascript

grid

reactjs

material-ui