Javascript ReactJS-使用材质UI网格间距_Javascript_Css_Reactjs_Material Ui

Javascript ReactJS-使用材质UI网格间距

javascript css reactjs material-ui

Javascript ReactJS-使用材质UI网格间距,javascript,css,reactjs,material-ui,Javascript,Css,Reactjs,Material Ui,我正在使用材质UI网格，一旦我将间距设置为大于0，我的网格就不适合屏幕，底部滑块可见，我可以水平移动页面我正在使用的简化代码： <Grid container justify="space-around" spacing={4}> <Grid item xs={6} > <Paper>a</Paper> </Grid> <Grid item xs={6} > <Paper>

我正在使用材质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>


A.
B

当间距为0时，栅格将完全匹配，并且底部滑块不存在。如何在网格项目之间保留空格，以确保网格不会增加应用程序的宽度。我做错了什么

链接到已复制相同问题的codesandbox：

谢谢


A.
B

假设希望保持列的宽度相等，则可以使它们保持动态

，而不是将固定宽度

分配给这两个列，从而允许组件根据可用空间调整其宽度

以下是对这个问题的正式回答，由

负边际

我们使用负边距来实现项目之间的间距有一个限制。如果负页边距超出指定范围，将显示水平滚动条。有3种可用的解决方法：

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

将填充应用于父对象，并将至少一半的间距值应用于子对象：


//...

添加溢出-x：隐藏；给父母

您可以使用{gap:15}作为样式

<Grid container style={{ gap: 15 }}>
            <Grid item xs={12}>
              //one element
            </Grid>
            <Grid item xs={12}>
              //other element
            </Grid>
          </Grid>

减小间距尺寸<代码>间距={4}在网格项周围提供

4*8=32px

的空间。因此，水平滚动条出现在页面中，因为包含的两个网格以及空间的宽度大于沙盒浏览器窗口的宽度。我用

spating={2}

进行了检查，它在网格项周围放置了一个

2*8=16px

的空间；项目之间有足够的空间，水平滚动条不会出现。从

响应网格关注一致的间距宽度，而不是列宽。材料设计边距和列遵循8px正方形基线网格。spacing属性是介于0和10之间的整数包含全部费用默认情况下，两个栅格项目之间的间距遵循线性函数：输出（间距）=间距*8px，例如间距={2} 创建一个16像素宽的间隙

有很多潜在的原因，没有一个能从你的帖子中辨别出来。放一个stackblitz（或类似的东西）来说明你的问题。这里-@Adam:）修复了谢谢你是的-用填充+间隙的组合替换了间距，现在它似乎起作用了。

<body>
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
     //...
   </Grid>
 </div>
</body>

<Grid container style={{ gap: 15 }}>
            <Grid item xs={12}>
              //one element
            </Grid>
            <Grid item xs={12}>
              //other element
            </Grid>
          </Grid>

<Grid container spacing={1}>
     <Grid item xs={12}>
     ...