使用react bootstrap在台式机中一行显示4张卡，在平板电脑版本中一行显示2张卡

Question

我使用的是react-bootstrap，我有4张卡片，我想在桌面版本中一行展示它们，在平板版本中在一张raw中展示2张卡片，而不是在一列中显示所有的卡片。下面是我的代码：

import Card from 'react-bootstrap/Card'

<Card className="card">
    <Card.Img variant="top" src={skill.content.image}/>
    <Card.Title>
        <h4>{skill.content.title}</h4>
    </Card.Title>
</Card>

Answer 1

您可以使用Card Layout组件CardGroup和CardDeck

import Card from 'react-bootstrap/Card'
import CardDeck from 'react-bootstrap/CardDeck'

<CardDeck>
    <Card className="col-12 col-md-6 col-lg-3">
        <Card.Img variant="top" src={skill.content.image}/>
        <Card.Title>
            <h4>{skill.content.title}</h4>
        </Card.Title>
    </Card>
</CardDeck>