css 如何使用MUI网格获得包含两列的行和包含一列的行？

cvxl0en2 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(177)

我想知道如何使用MUI组件实现图像中显示的设计。

我的问题是，我不知道如何插入第三个按钮到MUI网格，使它具有相同的宽度相比，其他两个按钮。

<Container>
  <Grid
    container
    direction="row"
    justifyContent="flex-start"
    alignItems="center"
    spacing={4}
  >
    <Grid item>
      <Button variant="outlined" onClick={() => {}}>
        Button 1
      </Button>
    </Grid>

    <Grid item>
      <Button color="secondary" variant="contained" onClick={() => {}}>
        Button 2
      </Button>
    </Grid>
  </Grid>
</Container>

css

来源：https://stackoverflow.com/questions/75399482/how-can-i-get-a-row-with-two-columns-and-a-row-with-one-column-using-mui-grid

1条答案

按热度按时间

cyvaqqii1#

查看本教程：https://mui.com/material-ui/react-grid/
应该看起来像这样：

<Grid container spacing={2}>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={12}>
    BUTTON
  </Grid>
</Grid>

其中xs={value}定义了一个网格项应该有多大，所以对于您的情况，您需要在一列上有两个相等的列，该列是以上列的总和。

赞(0）回复(0）举报 2023-02-10

我来回答

css 如何使用MUI网格获得包含两列的行和包含一列的行？

1条答案

相关问题

热门标签

最新问答