So stellen Sie sicher, dass jede row 4 Karten anzeigt und diese natürlich stapelt, wenn sich die Bildschirmgröße ändert. Idealerweise sollte zwischen ihnen etwas Platz sein. Ich habe jede mögliche Kombination ausprobiert, die ich recherchieren konnte.
#cardsContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: scroll;
overflow: hidden;
height: 1200px;
}
.card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 16px;
width: calc(25% - 16px);
padding-bottom: 10px;
font-size: 12px;
border-radius: 5px !important;
flex-basis: 25%;
outline-width: 0px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
outline: none;
border: none;
border-radius: 7px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 767px) {
.card {
width: 100%;
margin-bottom: 10px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<div id="cardsContainer">
<div class="row">
<div class="card-group">
<div class="card">
<div class="card-body">
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="quarter">Quarter:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select class="form-control" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-sm-6"><label for="weekNum">Week:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" class="form-control" value="2023-01-29"></div>
</div>
<div class="form-group"><label for="status">Status:</label>
<select class="form-control" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div class="form-group img">
<label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
</a>
</div>
<div class="form-group">
<label for="post">Post:</label>
<textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div class="form-group">
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" value="1">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="quarter">Quarter:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select class="form-control" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-sm-6"><label for="weekNum">Week:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" class="form-control" value="2023-01-29"></div>
</div>
<div class="form-group"><label for="status">Status:</label>
<select class="form-control" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div class="form-group img">
<label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
</a>
</div>
<div class="form-group">
<label for="post">Post:</label>
<textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div class="form-group">
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.glde/nTUL97" target="_blank">
<input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" value="1">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="quarter">Quarter:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select class="form-control" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-sm-6"><label for="weekNum">Week:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" class="form-control" value="2023-01-29"></div>
</div>
<div class="form-group"><label for="status">Status:</label>
<select class="form-control" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div class="form-group img">
<label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
</a>
</div>
<div class="form-group">
<label for="post">Post:</label>
<textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div class="form-group">
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.dgle/nTUL97" target="_blank">
<input type="text" class="form-control" value="https://posdts.gle/nTUL97"></a></div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" value="1">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="quarter">Quarter:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select class="form-control" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-sm-6"><label for="weekNum">Week:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" class="form-control" value="2023-01-29"></div>
</div>
<div class="form-group"><label for="status">Status:</label>
<select class="form-control" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div class="form-group img">
<label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
</a>
</div>
<div class="form-group">
<label for="post">Post:</label>
<textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div class="form-group">
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" class="form-control" value="https://posts.gle/ndTUL97"></a></div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" value="1">
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<form>
<div class="form-group row">
<div class="col-sm-6">
<label for="quarter">Quarter:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select class="form-control" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-sm-6"><label for="weekNum">Week:</label>
<select class="form-control" value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" class="form-control" value="2023-01-29"></div>
</div>
<div class="form-group"><label for="status">Status:</label>
<select class="form-control" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div class="form-group img">
<label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
</a>
</div>
<div class="form-group">
<label for="post">Post:</label>
<textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div class="form-group">
<label for="publishedPostLink">Published Link:</label>
<a href="https://posdts.gle/nTUL97" target="_blank">
<input type="text" class="form-control" value="https://posts.dgle/nTUL97"></a></div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" value="1">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
请阅读有关响应式类的引导文档 ，我在此代码中使用了它们 (col-md-6)，以便从平板电脑开始显示两张卡，而在较大的屏幕上显示 4 张卡 (col-xl-3)
诗。我清理了代码并添加了元视口，这对于移动查看很重要！