【发布时间】：2020-11-03 20:13:03
【问题描述】：
m从反应开始，我正在使用材料 - ui来构建形式，我无法解决组件中的对齐细节，因为表单有很多字段，它会有点“凌乱”，所以我想看看它是否改善了组件的对齐方式。
细节是当有 2 列（xs = 1 和 xs = 5 - “6 列”）时，它不会给出与下面的行相同的对齐方式，当还有 2 两列时（xs = 2 和 xs = 4 - “6列”）。
我找到的最接近的研究是在这个链接上，但我仍然无法正确了解这个细节。
How do I layout forms in MaterialUI?
下面是项目代码的 sn-p 和打印，试图更好地说明问题。
[return (
<Form onSubmit={handleSubmit}>
<Card className={classes.root}>
<CardContent>
<Grid container alignContent='stretch' spacing={0}> {/*Início Primeiro Container ( Linha )*/}
<Grid item xs={1}>
<Controls.Input
name="conCodigo"
label="Código"
size={sizeBox}
value={values.conCodigo}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={5}>
<Controls.Input
name="conNome"
label="Nome Contribuinte"
size={sizeBox}
value={values.conNome}
onChange={handleInputChange}
error={errors.conNome}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 1"
name="conFone1"
size={sizeBox}
value={values.conFone1}
onChange={handleInputChange}
error={errors.conFone1}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 2"
name="conFone2"
size={sizeBox}
value={values.conFone2}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Fone 3"
name="conFone3"
size={sizeBox}
value={values.conFone3}
onChange={handleInputChange}
/>
</Grid>
</Grid> {/*Fim Primeiro Container */}
<Grid container alignContent='stretch' spacing={0}>
<Grid item xs={4}>
<Controls.Input
label="Contato"
name="conContato"
size={sizeBox}
value={values.conContato}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
label="Fís./Jur."
name="conFisJur"
value={values.conFisJur}
onChange={handleInputChange}
options={contribuinteService.getFisJur()}
/>
</Grid>
<Grid item xs={4}>
<Controls.Input
label="CPF/CNPJ"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
<Grid item xs={2}>
<Controls.Input
label="Teste"
name="conCpfCnpj"
size={sizeBox}
value={values.conCpfCnpj}
onChange={handleInputChange}
/>
</Grid>
</Grid>
</CardContent>
</Card>
<Card className={classes.root}>
<CardContent>
<Grid container> {/*Início Segundo Container */}
<Grid item xs={6}>
<Controls.Input
label="E-mail"
name="conEmail"
size={sizeBox}
value={values.conEmail}
onChange={handleInputChange}
error={errors.conEmail}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conTipoDoac"
label="Tipo Doação"
size={sizeBox}
value={values.conTipoDoac}
onChange={handleInputChange}
options={contribuinteService.getTipoDoacao()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conCategoria"
label="Categoria"
size={sizeBox}
value={values.conCategoria}
onChange={handleInputChange}
options={contribuinteService.getCategoria()}
/>
</Grid>
<Grid item xs={2}>
<Controls.Select
name="conSexo"
label="Sexo"
size={sizeBox}
value={values.conSexo}
onChange={handleInputChange}
options={contribuinteService.getGenero()}
/>
</Grid>
</Grid> {/*Fim Segundo Container */}
</CardContent>
</Card>]
... [1][1]：https://i.stack.imgur.com/nyWOm.png
【问题讨论】：
-
屏幕插图中的图片贴错了，需要复制链接才能查看，抱歉英文，我用谷歌翻译写...
标签： reactjs material-ui