使用 material 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} 的网格项等等。

你也可以有以上的组合，例如：

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

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

您可以以不同方式划分列，或者不使用网格结构（例如，您可以 move to tables，如果这对您来说更有意义）。