模态框宽度调整时表单控件尺寸不受控问题求助

安全阿岳

2026-8-22

解决方案：固定表单控件尺寸不受模态框宽度影响

问题核心是Bootstrap栅格系统的宽度基于父容器百分比计算，当调整模态框宽度时，内部的Col sm="5"会随父容器（模态框）宽度同步变化。要让表单控件尺寸固定，需让表单区域脱离模态框的宽度约束。

方法1：在表单组件内部设置固定宽度容器

直接修改FormControlComponent.tsx的最外层容器，给表单区域设置固定宽度并居中，让内部栅格基于固定宽度计算：

return (
    {/* 替换原fluid容器，设置固定宽度并居中 */}
    <Container style={{ maxWidth: '800px', margin: '0 auto' }}>
        <Row>
            <Col className="m-1">
                <h4 className="mb-2" style={{ textAlign: "center" }}>Add Screen</h4>
                <hr></hr>
                <Form onSubmit={handleSubmit(onSubmit)} >
                    {/* 原表单内容保持不变 */}
                    {isLoading &&
                        <Row>
                            <Col className="p-2">
                                Loading ... <Spinner animation="border" variant="primary" />
                            </Col>
                        </Row>
                    }
                    {/* ... 其余表单代码 ... */}
                </Form>
            </Col>
        </Row>
    </Container>
);

方法2：在模态框内包裹表单组件

如果FormControlComponent需要在其他场景保持自适应，可以在模态框内给组件包裹一层固定宽度容器：

修改DisplayComponent.tsx的Modal.Body部分：

<Modal.Body>
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <FormControlCompnoent closeFunc={handleClose} addOrEdit="add" id={-1} ></FormControlCompnoent >
    </div>
</Modal.Body>