Pet*_*ina 5 javascript css reactjs material-ui
我正在使用 Material UI 网格，一旦我将间距设置为大于 0，我的网格就无法适应屏幕并且底部滑块可见，我可以稍微水平移动页面。
我正在使用的简化代码：
<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 时，网格完全适合并且底部滑块不存在。我如何仍然保持网格项目之间的空间，以确保网格不会增加应用程序的宽度。我究竟做错了什么？
复制到具有相同问题的代码和框的链接：https ://codesandbox.io/s/magical-sammet-y0297?fontsize =14& hidenavigation =1& theme=dark
谢谢
这是文档提供的对这个问题的官方回答：
负保证金
我们用来实现项目之间的间距的负边距有一个限制。如果负边距超出 ，则会出现水平滚动。有 3 种可用的解决方法：
- 不使用间距功能并在用户空间间距 ={0}（默认）中实现它。
- 将填充应用于父级，至少将一半的间距值应用于子级：
Run Code Online (Sandbox Code Playgroud)<body> <div style={{ padding: 20 }}> <Grid container spacing={5}> //... </Grid> </div> </body>
- 添加溢出-x：隐藏；给父母。
<Grid container justify="space-around" spacing={8}>
<Grid item xs >
<Paper>a</Paper>
</Grid>
<Grid item xs >
<Paper>b</Paper>
</Grid>
</Grid>
假设您希望保持列的宽度相等，则可以使它们保持动态，<Grid item xs >而不是为两者分配固定宽度<Grid item xs={6} >，从而允许组件根据可用空间调整其宽度。
小智 5
您可以使用 {gap:15} 作为样式
<Grid container style={{ gap: 15 }}>
<Grid item xs={12}>
//one element
</Grid>
<Grid item xs={12}>
//other element
</Grid>
</Grid>
或者你可以使用spacing
<Grid container spacing={1}>
<Grid item xs={12}>
...