Cześć mam pytanie dotyczące siatki Bootstrap'a na urządzeniu mobilnym. Chciałbym, aby na komputerach 4 elementy były obok siebie, natomiast na urządzeniu mobilnym po 2 obok siebie. W obecnej sytuacji, każda karta jest na całą szerokość jedna pod drugą. Dokumentacja Bootstrap'a w tym zakresie jest niezrozumiała, albo wykonuje coś źle. Mój kod jest następujący:
<html lang="pl">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-light pb-4 pt-4">
<div class="p-1">
<div class="row">
<div class="col-lg-3 lg">
<div class="card border-0" >
<img class="card-img-top" src="https://images.unsplash.com/photo-1550305080-4e029753abcf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1051&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title mobile">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-3 lg">
<div class="card border-0" >
<img class="card-img-top" src="https://images.unsplash.com/photo-1550305080-4e029753abcf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1051&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title mobile">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-3 lg">
<div class="card border-0" >
<img class="card-img-top" src="https://images.unsplash.com/photo-1550305080-4e029753abcf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1051&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title mobile">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-lg-3 lg">
<div class="card border-0" >
<img class="card-img-top" src="https://images.unsplash.com/photo-1550305080-4e029753abcf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1051&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title mobile">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Z góry bardzo Wam dziękuję za pomoc! :)
