如何在更少的时间内实现响应式卡片列

Question

bootstrap 文档给出了这一点，以使卡片列在 SASS 中响应：

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

但是，我的网站中有一个 LESS 版本的 bootstrap 4。

上面的少语法怎么写？

Answer 1

这是我想出的：

@media (min-width: 544px) {
  .card-columns {
    column-count: 2;
    column-gap: 1.25rem; }
    .card-columns .card {
      display: inline-block;
      width: 100%; } }

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

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

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