Bootstrap 4 - 卡片列中的响应卡片

@media(最小宽度:34em){.card-columns {-webkit 列数:2；-moz 列数:2；列数:2；}}@media(最小宽度:48em){.card-columns {-webkit 列数:3；-moz 列数:3；列数:3；}}@media(最小宽度:62em){.card-columns {-webkit 列数:4；-moz 列数:4；列数:4；}}@media(最小宽度:75em){.card-columns {-webkit 列数:5；-moz 列数:5；列数:5；}}I'm playing with Bootstrap 4 and I can't find a solution to add responsiveness to cards while in a div with class="card-columns" (this class applies a Masonry-like effect to the cards inside the div having this class).In Bootstrap 3 it was easy to style and make "cards" responsive since it was possible to apply something like class="col-md-3 col-sm-6 col-xs-12" to a div containing thumbnail, caption, etc.How to have the same effect while using cards in Bootstrap 4?Here is the HTML:<body><div class="container-fluid"> <div class="row"> <div class="col-md-4 hidden-sm-down" id="map_container"> <p>here we put the map</p> </div> <div class="col-md-8 col-sm-12 right_box"> <div class="row"> // here there's code for navbar </div> <div class=row"> <div class="card-columns"> <?php // Create and check connection if ($result->num_rows > 0) { // output card design while($row = $result->fetch_assoc()) { echo '<div class="card"> <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '"> <div class="card-block"> <h4 class="card-title">' . $row["name"] . '</h4> <p class="card-text">Text. Card content.</p> </div> <div class="card-footer text-muted"> <ul class="list-inline"> <li><i class="fa fa-user"></i></li> <li>14</li> </ul> </div> </div>'; } } else { echo "0 results"; } $conn->close(); ?> </div> </div> </div> </div></div></body>And here is the CSS I've used:#map_container {background-image: url(map.png);height: 100vh;}.right_box {-webkit-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);-moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);}.card {border-radius: 0 !important;border: 0 none;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);margin-left: 1px;margin-right: 1px;}.card-img-top {width: 100%;border-radius: 0 !important;}.card-columns {padding-top: 15px;}Given below are two images to make my situation clearer:Large screenSmaller screenI'd like cards to stack up vertically on smaller screens.Thanks for your suggestions! 解决方案 Bootstrap 4 (4.0.0-alpha.2) uses the css property column-count in the card-columns class to define how many columns of cards would be displayed inside the div element.But this property has only two values:The default value 1 for small screens (max-width: 34em)The value 3 for all other sizes (min-width: 34em)Here's how it is implemented in bootstrap.min.css :@media (min-width: 34em) { .card-columns { -webkit-column-count:3; -moz-column-count:3; column-count:3; ⋮ } ⋮}To make the card stacking responsive, you can add the following media queries to your css file and modify the values for min-width as per your requirements :@media (min-width: 34em) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }}@media (min-width: 48em) { .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }}@media (min-width: 62em) { .card-columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }}@media (min-width: 75em) { .card-columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }} 这篇关于Bootstrap 4 - 卡片列中的响应卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！