reactjs 如何为材料UI网格动态列宽

irlmq6kh 于 2022-12-12 发布在 React

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

对于材质UI网格，是否可以在同一容器中动态更改网格项的列宽？
因为我有时候有2个网格项需要显示在同一行中，有时候有4个网格项需要显示在同一行中。这里是一个代码框，顶部容器有两个网格项。第二个容器有4个网格项，我希望它们显示在同一行中，同时具有相同的宽度（xs）。
下面是一个代码沙箱https://codesandbox.io/s/material-demo-forked-c09gtg?file=/demo.js

reactjs

来源：https://stackoverflow.com/questions/74759278/how-to-dynamic-column-width-for-material-ui-grid

1条答案

按热度按时间

odopli941#

自动布局

自动布局使项目公平地共享可用空间。这也意味着您可以设置一个项目的宽度，其他项目将自动围绕它调整大小。
您只需要包含xs，而不需要为每个Grid项目给予任何值。

<Grid container spacing={1}>
  <Grid item xs>
    <Item>first item</Item>
  </Grid>
  <Grid item xs>
    <Item>second item</Item>
  </Grid>
  <Grid item xs>
    <Item>third item</Item>
  </Grid>
  <Grid item xs>
    <Item>fourth item</Item>
  </Grid>
</Grid>

MUI网格文档

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 如何为材料UI网格动态列宽

1条答案

自动布局

相关问题

热门标签

最新问答