如何添加偏移量 material-ui 网格

Question

我正在尝试使用它的网格系统在 material-ui 上制作一个小的 'Item added' 弹出对话框。但我不知道如何向网格添加偏移量。我正在尝试使用

实现类似于 Bootstrap 的 col-sm-10 offset-1 的效果

<Grid container justify='center' alignItems='center' item xs={10}>

但是没有用。我的解决方案是在我的内容前后添加一个空列，例如：

<Grid item xs={1}></Grid>
<Grid item xs={10} justify='center' alignItems='center'>Content</Grid>
<Grid item xs={1}></Grid>

我必须这样做吗？我不明白为什么 justify 和 alignItems 不起作用。这是codesandbox上的代码： https://codesandbox.io/s/item-added-jx9ri

感谢您的帮助！

Answer 1

我分叉了沙箱，您需要向您的容器添加一些属性，而不是使用幽灵网格项目。

请看这里https://codesandbox.io/s/item-added-forked-kv9qw?file=/src/App.js

Answer 2

只需使用带边距 (mx) 或填充 px 的框，其中 x 是水平的。在我看来，这比引入更多 css 类和需要维护的属性要好。

  <Grid item xs={12}>
  <Box px={4}>
    <Button fullWidth className={classes.button} variant="contained">
      Continuar Comprando
    </Button>
    </Box>
  </Grid>

Answer 3

我发现此解决方案的最佳方法如下。

<Grid container>
    {/* offset grid with column you want to offset */}
    <Grid item lg={6} md={6} sm={6}/>
    {/* main grid column! */}
    <Grid item lg={6} md={6} sm={6}>
        I am offset column!.
    </Grid>
</Grid>

Answer 4

如果你想让一个按钮右对齐，你所要做的就是将容器的justifyContent设置为flex-end，像这样：

<Grid container justifyContent="flex-end">

如何添加偏移量 material-ui 网格

How to add offset material-ui Grid

reactjs

material-ui

grid-layout