Bootstrap 4 - 卡列中的响应卡

我玩引导4,虽然在我无法找到一个解决方案,以增加响应能力卡div用class="card-columns"(本类应用砖石般的效果的卡有这个类的DIV中).

在引导3是容易款式,使"卡片"响应,因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个div thumbnail,caption等等.

在Bootstrap 4中使用卡时如何获得相同的效果？

这是HTML:

    


        

            
here we put the map
        

        


            


                // here there's code for navbar

            


            

                

                    num_rows > 0) {

                        // output card design
                        while($row = $result->fetch_assoc()) {

                            echo '

                                    
                                    

                                        
' . $row["name"] . '
                                        
Text. Card content.
                                    
                                    

                                        

                                            

                                            
14
                                        
                                    
                                  
';
                        }
                    } else {
                        echo "0 results";
                    }

                    $conn->close();
                    ?>
                

            

        

    

这是我用过的CSS:

#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;
}

以下是两张图片,让我的情况更加清晰:

大屏幕

屏幕较小

我希望卡片能够在较小的屏幕上垂直堆叠.

谢谢你的建议!

更新2018 - Bootstrap 4

您可以简单地使用SASS mixin来更改每个断点/网格层中的卡数.

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

SASS演示:http://www.codeply.com/go/FPBCQ7sOjX

或者,CSS只是这样......

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

仅CSS演示:https://www.codeply.com/go/FIqYTyyWWZ

引导4(4.0.0-alpha.2)使用CSS属性column-count的card-columns类定义如何的卡多列将里面显示div元素.
但是这个属性只有两个值:

小屏幕的默认值1(max-width: 34em)

所有其他尺寸的值3(min-width: 34em)

以下是它在bootstrap.min.css中的实现方式:

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ?
    }
    ?
}

要使卡堆叠响应,您可以将以下媒体查询添加到css文件中,并min-width根据您的要求修改值:

@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;
    }
}