作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 reactjs 中使用 material-ui 网格。在列网格容器中,我想使用一个网格项,我想显示另一个网格项。我希望第三项用完其他 2 个网格项之间的剩余网格空间。 (即)我想展示
网格项目 1
//剩余网格空间
网格项目 2
我试过了
<Grid container direction="column">
<Grid item xs={12}>
Grid Item 1
</Grid>
<Grid item xs={12} /> // this makes a space but not the entire space
<Grid item xs={12}>
Grid Item 2
</Grid>
我怎样才能做到这一点?
最佳答案
您正在谈论有问题的列网格,但在代码片段中,使用了行。所以我假设一个列网格。
Naima 也提出了关于提供 xs={12]}
的有效观点。如果您提供 12,那么它将占用整个行/空间。
<Grid container direction="column">
<Grid item xs={3}>
Grid Item 1
</Grid>
<Grid item xs={true}>
// this makes a space but not the entire space
</Grid>
<Grid item xs={3}>
Grid Item 2
</Grid>
</Grid>
设置xs={true}
,将占用可用空间
关于javascript - 如何在reactjs material-ui中制作一个使用剩余网格空间的网格项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65760317/
我是一名优秀的程序员,十分优秀!