Javascript 反应带布局问题

我是reactstrap的新手，我对布局有一些问题

我想设计一个连接容器，如下例所示

当我为较小的屏幕调整屏幕大小时，文本会分层显示在图像上。而且它没有正确对齐

此布局的代码是：

render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>
                                <Card>
                                    <CardBody>
                                        <AvForm className="form-horizontal" onValidSubmit={(e, v) => {
                                            this.handleValidSubmit(e, v)
                                        }}>
                                            <Row>
                                                <Col sm="3"><img src={mollieImage} style={{
                                                    width: '300px',
                                                    height: "auto",
                                                    boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)"
                                                }}/></Col>
                                                <Col sm="9">
                                                    <Row><h5>Connection Status</h5></Row>
                                                    <Row><p>Allow access to your customers, payments, organization, profiles and onboarding.</p></Row>
                                                    <Row>
                                                        {this.props.isConnected ? <Button type="submit" color="danger">Disconnect</Button> :
                                                            <Button type="submit" color="success">Connect</Button>}
                                                    </Row>
                                                </Col>
                                            </Row>
                                        </AvForm>
                                    </CardBody>
                                </Card>
                    </Container>
                </div>
            </React.Fragment>
        )
    };

render（）{
返回(
{
本手册（e、v）
}}>
连接状态
允许访问您的客户、付款、组织、配置文件和入职

{this.props.isConnected？断开连接：
连接}
)
};

为了使图像具有响应性，我将

300px

值重构为

maxWidth

，而不是

width

。至于它的

宽度

，您可以通过将

100%

分配给它，使它对其容器做出响应

<Col sm="3"><img src={mollieImage} style={{
  maxWidth: "300px",
  height: "auto",
  boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)",
  width: "100%"
}} /></Col>

因此，当客户端的屏幕大小小于

576px

时，即

sm

道具将开始失效，因此布局将发生剧烈变化。为此，您必须提出解决方案，例如使用

xs

prop或CSS

@media (min-width: 576px)
.col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}