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

【问题标题】：Same width column with Material-UI 1 Grid与 Material-UI 1 Grid 相同宽度的列
【发布时间】：2017-09-20 20:52:07
【问题描述】：

有什么方法可以使用 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，但没有任何变化。

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

在 Grid 容器中尝试将 align="center" 替换为 align="stretch"，以便所有 Grid 项都将拉伸并具有与其父项相同的宽度。

documentation 中的这个演示说明性强，玩起来很有趣

【讨论】：

是的，我完全错过了这个演示以及这个弹性选项。