问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ReactJS - 使用材质 UI 网格间距

社区维基
1
新手上路，请多包涵

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

spacing = 0 时，网格完全适合并且底部滑块不存在。我如何仍然在网格项之间保留空间以确保网格不会增加应用程序的宽度。我究竟做错了什么？

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

谢谢

原文由 Peter Slanina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcssreactjsmaterial-ui
阅读 315
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是 文档 对这个问题的官方回答：

负保证金

我们用来实现项目间距的负边距有一个限制。如果负边距超出 .有 3 种可用的解决方法：

  1. 不使用间距功能并在用户空间 spacing={0}（默认）中实现它。
  2. 将填充应用于父级，至少将一半的间距值应用于子级：
 <body>
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
     //...
   </Grid>
 </div>
</body>
  1. 添加溢出-x：隐藏；给父母。

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
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}>
     ...

原文由 user7396942 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题