css - Bootstrap 4(阿尔法 3): card columns - customized number of columns

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

“column-count”属性是您需要更改的全部内容。

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