如何制作垂直对齐的响应式 React 引导卡？

Question

我有一个卡片组件：

 <Card className="m-5 border-0 shadow" style={styles.card}> <Row> <Col> <Card.Img src={props.image} style={styles.cardImage}/> </Col> <Col> <Card.Body> <Card.Title as="h1"> {props.title} </Card.Title> <Card.Text as="h4" style={styles.cardText}> {props.description} </Card.Text> </Card.Body> { props.link && <Button style={styles.button} href={props.url}>Read More</Button> } </Col> </Row> </Card>

卡片被包裹在来自react-bootstrap的流体<Container>和<CardGroup>组件中：

 <Container fluid className="text-center"> <CardGroup className="m-5 d-block"> <Card /> </CardGroup> </Container>

在桌面设备上看起来像这样：

但它在移动设备上看起来像这样：

以下是 styles：

 const styles = { card: { backgroundColor: '#B7E0F2', borderRadius: 55, padding: '3rem' }, cardImage: { height: '100%', objectFit: 'cover', borderRadius: 55 } };

有谁知道如何解决这一问题？ 谢谢。

Answer 1

尝试这个。 对于<Row>组件 class 与 css 文件中的 className row分配属性如下：

.row {
 display: flex,
 flex-wrap:wrap
 }

Answer 2

试试这个

                    <Card.Columns>

                                <Card >
                                <Card.Body>
                                <Card.Title style={{textAlign:"center"}}>title</Card.Title>
                                <Card.Text style={{textAlign:"left"}}>
                                    description
                                </Card.Text>
                                </Card.Body>
                                <Card.Footer>
                                <Card.Text style={{textAlign:"right"}}>Link</Card.Text>
                                </Card.Footer>
                                </Card>

                    </Card.Columns>

有关更多详细信息，请查看此链接