使用材质UI反应，嵌套的网格容器和项目不适合屏幕

Question

我正在尝试制作如下所示的UI，但由于某些原因，它无法按预期进行。

我也尝试过更改列，但这也不起作用。

问题是我使用的是Grid，它包含各自的项目和容器，但是更改它们会破坏整个设计。

这是我的代码：

<React.Fragment>
                <Container maxWidth="xl">
                    <Grid container spacing={1} className="mainBlock">
                        <Grid item xs={12}>
                            <div className="rightBlock liproCard">
                                <Grid container spacing={1} style={{height: '115px'}}>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                </Grid>

                            </div>
                        </Grid>
                    </Grid>
                </Container>
            </React.Fragment>

这是当前输出：

这是所需的输出：

Answer 1

Material-ui's grid container是基于12列的响应式布局系统。这意味着在每个网格容器中-最多可以有12个带有xs={1}的网格项目，6个带有xs={2}的网格项目，4个带有xs={3}的网格项目，依此类推。 / p>

您还可以将以上各项组合使用，例如：

|        xs == 6        |  xs == 3  |  xs == 3  | 
  ^ This will get 50%      ^ 25%        ^ 25%

在您的代码中，项的总和为20，大于12（网格支持的列数）。

您可以不同地划分列，也可以不使用Grid结构（例如，move to tables，如果这样做更有意义）。