如何在Material-UI Grid中添加偏移量

Question

我正在尝试使用 material-ui 的 Grid 系统制作一个小的“已添加项目”弹出对话框。但是我无法弄清如何向 Grid 中添加偏移量。我想实现类似于 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

谢谢帮助！

- Cayo Eduardo

Answer 1

我发现以下是最好的解决方法：

<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>

- shahid jamal

Answer 2

Material UI v5现在有一个名为Grid2的改进网格组件。使用Grid2，为了摆脱前面的列，您可以使用xsOffset属性，如下所示：

<Grid2 xs={10} xsOffset={1} justify='center' alignItems='center'>Content</Grid2>

请注意，我没有传递item属性，因为Grid2默认将其网格视为项目，除非您通过传递container属性来指定它们应该被视为容器。

- Elyasaf755

Answer 3

我fork了这个沙盒，你需要向容器添加一些属性，而不是使用ghost网格项。

请参见此处https://codesandbox.io/s/item-added-forked-kv9qw?file=/src/App.js

- Rob Terrell

---

我相信这是您正在寻找的预期效果。 - Rob Terrell

如果您解释一下您所做的或更改的内容会很好。 - jbreslow

Answer 4

如果你想把一个按钮对齐到右边，你只需要将容器的 justifyContent 属性设置为 flex-end，像这样：

<Grid container justifyContent="flex-end">

- Kornelius

Answer 5

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

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

- Kal

---

px 表示像素内边距，而 offset 则是以网格列为单位。因此，在这里，它仅应用 4 像素的内边距，而不是给出 4 列的偏移量。 - Tejasvi Hegde