Question

有没有办法用Material-UI Grid系统创建一列相同宽度的项目？我有以下代码

<Grid container align="center" direction="column">
    <Grid item className={classes.item}>
        <img src={logo}/>
    </Grid>
    <Grid item>
        <TextField label={messages.login.username} fullWidth />
    </Grid>
    <Grid item >
        <TextField label={messages.login.password} fullWidth />
    </Grid>
    <Grid item>
        <Button color="primary" raised>{messages.login.loginBtn}</Button>
    </Grid>
</Grid>

理想情况下，我希望所有Grid items宽度相等，可能是container的宽度。我尝试在所有xs=12上设置items，但没有任何变化。

Answer 1

在网格容器中尝试将^.+\n.+\n.+\n.+\n.+\n.+\n.+\n.+\n.+\n.+\n(.+\n.+\n.+\n.+\n.+\n)替换为align="center"，以便所有网格项目都将拉伸并与其父项具有相同的宽度。

documentation中的这个演示是解释性的，有趣的是

带有Material-UI 1 Grid的相同宽度列

1 个答案: