14列居中Grid内嵌Form的Form.Field超出边界，如何实现同行正常展示

问题根因 #

你使用的是Semantic UI React组件库，表单字段溢出的核心原因是默认状态下Form.Group下的Form.Field最小宽度由内容决定，当6个字段的内容总最小宽度超出14列Grid容器宽度时就会突破边界。

解决方案 #

方案1：使用组件原生属性适配（最推荐）

直接利用Semantic UI Form组件的内置属性控制宽度：

1. 给Form.Group添加widths={6}属性，声明组内6个字段自动均分父容器的全部宽度
2. 给每个Select组件添加fluid属性，让下拉组件完全适配所属Form.Field的宽度，不会被下拉选项、多选标签撑宽容器

修改后的核心代码示例：

return(
    ...
    <Grid centered={true}>
        <Grid.Column width={14}>
            <h2 style={{ marginBottom: '25px' }}>Edición de ficha</h2>
            <Form id="formulario">
                ...
                {/* 新增widths={6}属性 */}
                <Form.Group widths={6}>
                        <Form.Field>
                            <label>
                                Admones. públicas u<br />
                                órganos competentes
                            </label>
                            {/* 新增fluid属性 */}
                            <Select
                                fluid
                                name="publicAdm"
                                options={destAdmonesPub}
                                multiple={true}
                                value={selectedPublicAdm}
                                onChange={this.onChangePublicAdm}
                                />
                        </Form.Field>
                        {/* 其余5个Form.Field同步给Select添加fluid属性即可 */}
                    ...
                </Form.Group>
                ...
            </Form>
        </Grid.Column>
    </Grid>
    ...
)

方案2：添加自定义CSS兜底适配

如果方案1调整后仍有溢出，添加以下CSS强制约束容器宽度，解决flex布局下内容撑破父容器的问题：

/* 约束表单组总宽度 */
#formulario .ui.form .grouped.fields {
  width: 100%;
  flex-wrap: nowrap;
}
/* 允许字段自动收缩，避免内容撑开宽度 */
#formulario .ui.form .field {
  flex: 1;
  min-width: 0;
}
/* 允许多选下拉的标签自动换行，避免横向溢出 */
#formulario .ui.multiple.dropdown > .label {
  white-space: normal;
}

修改完成后6个Form.Field会自动在14列容器内等分宽度同行排布，不会突破预设的左右边距。

内容的提问来源于stack exchange，提问作者dgarciagarcia