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>

关于较小的屏幕视图，Col 组件上的道具 sm 仅在屏幕尺寸大于或等于 576px 时才会生效。请参阅 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

Reactstrap布局问题

Reactstrap layout issue

javascript

reactjs

reactstrap