Отображение 4 карточек в одной строке на рабочем столе, 2 карточек в одной строке в версии для планшета Использование реакции bootstrap

Question

Я использую react-bootstrap, и у меня есть 4 карты, которые я хотел показать в одной строке в настольной версии и 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

Вы можете использовать Макет карты компоненты 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>