gpt4 book ai didi

javascript - ReactJS - 使用 Material UI 网格间距

转载 作者:行者123 更新时间:2023-12-03 19:42:20 24 4
gpt4 key购买 nike

我正在使用 Material UI 网格,一旦我将间距设置为高于 0 ,我的网格不适合屏幕并且底部 slider 可见,我可以水平移动页面。

我正在使用的简化代码:

<Grid container
justify="space-around"
spacing={4}>
<Grid item xs={6} >
<Paper>a</Paper>
</Grid>

<Grid item xs={6} >
<Paper>b</Paper>
</Grid>


</Grid>

间距 = 0 时,网格完全适合并且底部 slider 不存在。如何在网格项之间保持空格,以确保网格不会增加应用程序的宽度。我究竟做错了什么?

链接到复制相同问题的代码框: https://codesandbox.io/s/magical-sammet-y0297?fontsize=14&hidenavigation=1&theme=dark

谢谢

最佳答案

这是 docs 提供的此问题的官方答案:

Negative margin

There is one limitation with the negative margin we use to implement the spacing between items. A horizontal scroll will appear if a negative margin goes beyond the . There are 3 available workarounds:

  1. Not using the spacing feature and implementing it in user space spacing={0} (default).
  2. Applying padding to the parent with at least half the spacing value applied to the child:
<body>
<div style={{ padding: 20 }}>
<Grid container spacing={5}>
//...
</Grid>
</div>
</body>
  1. Adding overflow-x: hidden; to the parent.

关于javascript - ReactJS - 使用 Material UI 网格间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61797942/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com