如何添加偏移材质-ui Grid

Question

我正在尝试使用它的网格系统在材料用户界面上制作一个小的“添加项目”弹出对话框。但我不知道如何向网格添加偏移量。我正在尝试实现类似于 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

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

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

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

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