reactjs - 使用材质 UI 反应的嵌套网格容器和项目不适合屏幕
问题描述
我正在尝试制作如下所示的 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>
这是当前输出:
这是所需的输出:
解决方案
Material-ui 的网格容器是一个基于 12 列的响应式布局系统。这意味着在每个网格容器内 - 您最多可以有 12 个网格项xs={1}
, 6 个网格项xs={2}
, 4 个网格项,xs={3}
依此类推。
你也可以有以上的组合,例如:
| xs == 6 | xs == 3 | xs == 3 |
^ This will get 50% ^ 25% ^ 25%
在您的代码中,项目总和为 20,大于 12(网格支持的列数)。
您可以以不同的方式划分列,或者不使用网格结构(例如,如果这对您更有意义,您可以移至表格)。
推荐阅读
- symfony - CKEditor 不能在 Symfony 4.4 上使用 EasyAdmin 3
- nlp - 如何使用 NLP 从成分中提取主要食物词?
- javascript - 当您分发项目时,NPM 是否会自动从您的 package.json 下载所有依赖项?
- list - 如何在多个索引处用不同的字符替换列表中的项目?
- r - 将不均匀的 json 解析为 tibble
- pytorch - Pytorch 多人聚会
- java - Maven 发布插件 - 通过服务帐户更新 pom.xml
- amazon-web-services - 托管在 AWS 上的私有 NuGet 包服务器仅对一个 NuGet 包返回 403 Forbidden 错误
- javascript - 使用 Hooks replaces 而不是 concat 在 React 上更新数组状态
- angular - 向 Angular 添加自定义类型