На больших экранах, таких как Мониторы, работает отлично, как и должно, но на маленьких экранах, таких как Мобильные телефоны, некоторые карты будут обрезаны.
На больших экранах карты будут отображаться в один ряд, и если на экране становится меньше, карты будут адаптироваться и go на новую строку:
На меньших экранах вместо карт одна под другой, как и должно быть, но некоторые карты, которые я не могу достать и где обрезаны, как вы можете видеть на картинке ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="height=device-height width=device-width, shrink-to-fit=no">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery_ui.js"></script>
<script src="scripts/bootstrap.js"></script>
<link rel="stylesheet" href="styles/bootstrap.css">
<title>Übersicht</title>
</head>
<body>
<div class="d-flex flex-wrap justify-content-center align-content-center align-items-center vw-100 vh-100">
<div class="card m-3">
<div class="card-header text-center">1</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">2</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">3</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">4</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">5</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">6</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">7</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
<div class="card m-3">
<div class="card-header text-center">8</div>
<div class="card-body">
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
<div class="card-text">Text Text Text Text Text Text</div>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-dark">Text</button>
</div>
</div>
</div>
</body>
</html>