如何制作垂直對齊的響應式 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>

有關更多詳細信息，請查看此鏈接