如何使响应式React bootstrap卡垂直对齐？

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的fluid <Container>和<CardGroup>组件中

​

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

​

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

​

​

但在移动设备上看起来是这样的：

​

​

以下是样式：

​

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

​

有人知道怎么解决这个问题吗？谢谢。

Answer 1

尝尝这个。对于css文件中具有className row的<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>

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