Bootstrap 4-卡列中的响应卡

Bootstrap 4-卡列中的响应卡

引导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;    }}