reactjs - 如何添加偏移材质-ui Grid

Question

我正在尝试使用它的网格系统在 material-ui 上制作一个小的“添加项目”弹出对话框。但我不知道如何向网格添加偏移量。我正在尝试实现类似于 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 不起作用。这是代码沙盒上的代码： https ://codesandbox.io/s/item-added-jx9ri

谢谢您的帮助！

标签： reactjsmaterial-uigrid-layout

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>