如何添加偏移材质-UI Grid

Question

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

实现类似于Bootstrap的<a href="{% url 'translator:index' %}">Translator</a> {# outputs <a href="/translator/">Translator</a> #}

col-sm-10 offset-1

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

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

我必须这样做吗？我不知道为什么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>