css - 与 Material-UI 1 Grid 相同宽度的列

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 的宽度。我已尝试在所有 items 上设置 xs=12 但没有任何变化。

Answer 1

在 Grid 容器中，尝试将 align="center" 替换为 align="stretch"，这样所有的 Grid 元素都会拉伸(stretch)并具有相同的宽度作为他们的 parent 。

这个演示在 documentation解释性强，玩起来很有趣