Question

我正在使用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时，网格完全适合并且底部滑块不存在。如何仍保持网格项之间的间隔，以确保网格不会增加应用程序的宽度。我在做什么错了？

具有相同问题的codeandbox链接已复制：https://codesandbox.io/s/magical-sammet-y0297?fontsize=14&hidenavigation=1&theme=dark

谢谢

Answer 1

您可以使用 {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}>
     ...

Answer 2

这是docs对此问题的正式回答：

负边距

我们用来实现项目之间间距的负边距存在一个限制。如果负边距超出，则会出现水平滚动。有3种可用的解决方法：

不使用间隔功能，并在用户空间interval = {0}（默认值）中实现它。

将填充应用于父级，且间距值应至少应用于子级的一半：
<body>
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
     //...
   </Grid>
 </div>
</body>
添加溢出-x：隐藏；给父母。

Answer 3

<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} >分配给这两个列，从而允许组件根据可用的尺寸调整其宽度空间。

Answer 4

减少间距尺寸。 spacing={4} 在网格项目周围提供 4*8=32px 的空间。因此，水平滚动条出现在您的页面中，因为两个包含的网格以及空间的宽度大于沙盒浏览器窗口的宽度。我检查了 spacing={2}，它在网格项周围放置了一个 2*8=16px 的空间；项目之间有足够的空间，水平滚动条不会出现。从documentation

<块引用>

响应式网格侧重于一致的间距宽度，而不是列宽。 Material Design 边距和列遵循 8px 正方形基线网格。间距属性是 0 到 10 之间的整数包括的。默认情况下，两个网格项之间的间距遵循线性函数：输出（间距）=间距* 8px，例如间距={2} 创建一个 16 像素宽的间隙。

ReactJS-使用材质UI网格间距

4 个答案: