Bootstrap 4（Alpha 3）：卡片列 - 自定义列数

Question

我在 Bootstrap 4 (Alpha 3) Card Colums 中使用并尝试自定义列数。 Docs中有如下例子：

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

由于默认列数为 3（除了 sm 设备），我尝试将默认值减少到 2 列，在附加的 CSS 文件中使用以下代码（在 Bootstrap CSS 之后）：

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

但是，不幸的是，结果仍然是 3 列。我做错了什么？

非常感谢您的帮助！

Answer 1

您需要使用@media CSS 标记。在网站的 CSS 文件中使用下面的 CSS 代码，您应该一切顺利。

@media (min-width: 576px) and (max-width: 768px)
{
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

“列数”属性是您需要更改的全部内容。

您可以将min-width 和max-width 更改为任何引导网格选项以获得所需的结果。参考Bootstraps Grid Options。

Answer 2

您可以使用 SASS 更改 media-breakpoint-only..

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

工作演示：http://codeply.com/go/nHZg5n2vuE