Form.Field 组件超出范围

Question

我正在尝试制作一个内部有一个 Form.Group 的表单，由 6 个 Form.Field 组成。此表单位于 14 列居中的网格内，每侧有 2 列作为水平边距（参见下面的代码）。

我的问题是字段超出范围，超出了边距。我希望将它们全部放在一行中，在这 14 个居中的列内。

这是我的代码示例，显示了主要组件。 Form.Field 的其余部分基本相同，变化很小。

return(
    ...
    <Grid centered={true}>
        <Grid.Column width={14}>
            <h2 style={{ marginBottom: '25px' }}>Edición de ficha</h2>
            <Form id="formulario">
                ...
                <Form.Group>
                        <Form.Field>
                            <label>
                                Admones. públicas u<br />
                                órganos competentes
                            </label>
                            <Select
                                name="publicAdm"
                                options={destAdmonesPub}
                                multiple={true}
                                value={selectedPublicAdm}
                                onChange={this.onChangePublicAdm}
                                />
                        </Form.Field>
                        ...
                    ...
                </Form.Group>
                ...
            </Form>
        </Grid.Column>
    </Grid>
    ...
)

Answer 1

除了您在此处分享的内容之外，您页面上的 CSS 还存在其他问题。 I put together a codesandbox example验证使用相同的props和组件，多个Form.Field不会跳出一个Form.Group。

我怀疑问题在于某处的 CSS 指定了 Form.Field 组件的宽度或最小宽度，这导致它们脱离了行容器。