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>

该卡被包裹在<Container>中的<CardGroup>和react-bootstrap液体中：

<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>的{{1}}组件类，分配属性，如下所示：

row

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

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

2 个答案: