Reactstrap布局问题

Question

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

我想设计一个连接容器，就像下面的例子。

enter image description here

当我调整屏幕大小以适应较小的屏幕时，文本会覆盖在图像上。而且它没有正确地对齐。enter image description hereenter image description here

我对这个布局的代码是：

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>
        )
    };

Answer 1

为了使您的图像具有响应性，我将300px值重构为maxWidth而不是width。至于它的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>

对于较小的screens视图，只有当屏幕尺寸大于或等于576px时，Col组件上的属性sm才会生效。请参阅Bootstrap样式表上的示例col-sm-定义

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

所以当客户端的屏幕尺寸小于576px时，也就是sm道具开始失效的时候，你的布局就会发生很大的变化。为此，您必须想出解决方案，例如使用xs prop或CSS media queries。