Сейчас я немного возился с сеткой bootstrap, я вроде как понял это, но если я изменю ширину элементов внутри столбца, то при изменении размера браузера оно будет перекрываться.
Просто пытаюсь заставить карточки реагировать при изменении размера браузера, но я хочу также изменить размер карточек, не перекрывая их.
Вот как это выглядит, когда я меняю ширина
Вот как это должно выглядеть
вот как я сейчас это делаю:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-down"></i></a>
</div>
<h4 class="text-white mb-2">1</h4>
<p class="text-white">Test Card</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-thumbs-up"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 2</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card card-cascade dashboard-card bg-lightblue">
<div class="data mt-4 ml-3">
<div class="button px-2">
<a class="btn-floating btn-lg float-right"><i class="fas fa-ticket"></i></a>
</div>
<h4 class="text-white mb-2">0</h4>
<p class="text-white">Test Card 3</p>
</div>
</div>
</div>
</div>
</div>
</main>
вроде как застрял который. Спасибо за любую помощь.